Question

我正在创建一个带有两个滑块的自定义表单（实际上是三个，因为我将两个滑块转换为一个范围滑块。）我正在使用input type="range"。

使用JS我已经为自定义范围滑块添加了一些限制。

表示最大值的输入值不能小于最小值
当最小值大于最大值时，最大值将重置为大于最小值的值

min和max的起始值为0和100 现在出于某种原因，当您将最小值调整到100以上然后将其更改回小于100时，自定义范围滑块会中断。 更新：或一旦最小值设置为8或更高...... -_-
最大值设置为（最小值+ 100），而这应该仅在max小于min（max

我无法弄清楚为什么会发生这种情况以及如何解决这个问题。

function equalizeMin(value) {
  let maxVal = document.getElementById('maxText').value;
  
  if(value > maxVal) {
    document.getElementById('maxText').value = Number(value) + 100;
    document.getElementById('maxRange').value = Number(value) + 100;
  }
  
  document.getElementById('minText').value = value;
  document.getElementById('minRange').value = value;
  
  setAvg();
}

function equalizeMax(value) {
  let minVal = document.getElementById('minText').value;
  if(value >= minVal) {
    document.getElementById('maxText').value = value;
    document.getElementById('maxRange').value = value;
  } else {
    document.getElementById('maxText').value = minVal;
    document.getElementById('maxRange').value = minVal;
  }
  setAvg();
}

function equalizeAvg(value) {
  document.getElementById('avgText').value = value;
  document.getElementById('avgRange').value = value;
}

function setAvg() {
  let _minVal = document.getElementById('minText').value;
  let _maxVal = document.getElementById('maxText').value;
  let avgVal = Number(_minVal) + Math.round((_maxVal - _minVal) / 2);
  
  document.getElementById('avgText').min = _minVal;
  document.getElementById('avgRange').min = _minVal;
  
  document.getElementById('avgText').max = _maxVal;
  document.getElementById('avgRange').max = _maxVal;
  
  document.getElementById('avgText').value = avgVal;
  document.getElementById('avgRange').value = avgVal;
}

window.onload = setAvg();  
//

* {
  box-sizing: border-box;
}

form {
  position: relative;
  width: 300px;
}
form span {
  display: inline-block;
  width: calc(50% - 2px);
}
form span label {
  display: block;
}
form span input[type="number"] {
  width: 100%;
}
form .range, form .average {
  display: block;
  padding: 1rem 0;
  width: 100%;
}
form .range input[type="range"], form .average input[type="range"] {
  -webkit-appearance: none;
  background-color: silver;
  border-radius: 4px;
  display: block;
  height: 8px;
  pointer-events: none;
  position: absolute;
  outline: none;
  width: 100%;
}
form .range input[type="range"]::-webkit-slider-thumb, form .average input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: gray;
  border-radius: 50%;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  height: 20px;
  pointer-events: all;
  position: relative;
  width: 20px;
  z-index: 2;
}
form .range input[type="range"]::-webkit-slider-thumb:active, form .average input[type="range"]::-webkit-slider-thumb:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}
form .range input[type="range"]#avgRange, form .average input[type="range"]#avgRange {
  margin: 1rem 0;
}

<form>
  <span>
    <label for="minText">Min value</label>
    <input type="number" id="minText" value="0" onchange="equalizeMin(this.value)" min="0" />
  </span>
  <span>
    <label for="maxText">Max value</label>
    <input type="number" id="maxText" value="100" onchange="equalizeMax(this.value)" min="0" />
  </span>
  <div class="range">
    <input type="range" min="0" max="1000" value="0" id="minRange" onchange="equalizeMin(this.value)">
    <input type="range" min="0" max="1000" value="100" id="maxRange" onchange="equalizeMax(this.value)">
   </div>
  <br>
  <div class="average">
    <span>
      <label for="avgText">New value</label>
      <input type="number" id="avgText" value="50" onchange="equalizeAvg(this.value)" />
    </span>
    <input type="range" min="0" max="1000" value="50" id="avgRange" onchange="equalizeAvg(this.value)" />
  </div>
</form>

Answer 1

我已经弄清楚了！

事实证明，从范围输入中提取的值不是数字。在计算平均值时我必须将其更改为数字的事实应该表明它，但我完全错过了它。

发生的事情是，最小值4被认为大于300。

将值转换为Number(...)的数字解决了我的问题。

带有范围滑块的自定义表单中断，我不知道为什么

1 个答案: