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

Question

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

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

• 代表最大值的输入值不能小于最小值

最小值和最大值的起始值分别为0和100
现在，由于某些原因，当您将最小值调整到大于100，然后将其更改回小于100时，自定义范围滑块会中断
更新：或者一旦最小值设置为8或更高-_-
最大值设置为（最小值100），而这只应在最大值小于最小值（最大值）时发生

我不明白为什么会发生这种情况，以及如何解决。

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（...）将值转换为数字解决了我的问题。