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

Question

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

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

• 代表最大值的输入值不能小于最小值
• 当最小值大于最大值时，最大值将重置为比最小值大100的值

min和max的起始值为0和100。
现在由于某种原因，当您将最小值调整为大于100并将其更改回小于100时，自定义范围滑块会中断。
更新：或者将最小值设置为8或更高... -_-
最大值设置为（min value + 100），而这仅应在max小于min（max <min）时发生，如上所述。

我不知道为什么会这样以及如何解决这个问题。

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