为何相互联动的两个range输入框值会出现异常变动？

问题描述 #

创建两个相互联动的input range元素，分别表示最小值和最大值，搭配显示对应值的元素。规则为最小值不得大于最大值，最大值不得小于最小值，调整其中一个输入框的值时，另一个需相应调整。但将最小值调整至99以上时，最大值输入框要么自行锁定，要么值出现跳变。

原代码 #

<head>
</head>
<body>
<div id="price-div"> </div>
<script>
const price_div = document.getElementById('price-div')

const min_price_range = document.createElement('input')
min_price_range.setAttribute('type','range')
min_price_range.setAttribute('min','1')
min_price_range.setAttribute('max','300')
min_price_range.setAttribute('value','20')

const div_display_min_price = document.createElement('div')
div_display_min_price.innerHTML = `Min price: ${min_price_range.value}$`

const max_price_range = document.createElement('input')
max_price_range.setAttribute('type','range')
max_price_range.setAttribute('min','1')
max_price_range.setAttribute('max','300')
max_price_range.setAttribute('value','50')

const div_display_max_price = document.createElement('div')
div_display_max_price.innerHTML = `Max price: ${max_price_range.value}$`

price_div.appendChild(min_price_range)
price_div.appendChild(div_display_min_price)
price_div.appendChild(max_price_range)
price_div.appendChild(div_display_max_price)

min_price_range.oninput = function(){
    div_display_min_price.innerHTML = `Min price: ${this.value}$`
    //This fragment should change the maximum value if the minimum value is greater than it
    if (this.value > max_price_range.value) {
        max_price_range.value = this.value
        div_display_max_price.innerHTML = `Max price: ${this.value}$`
    }
 }

 max_price_range.oninput = function(){
    div_display_max_price.innerHTML = `Max price: ${this.value}$`
    if (this.value < min_price_range.value) {
    //This fragment should change the minimum value if the maximum value is less than it
        min_price_range.value = this.value
        div_display_min_price.innerHTML = `Min price: ${this.value}$`
    }
 }
</script>
</body>

问题原因 #

问题出在字符串与数字的比较逻辑上：input range的value属性返回的是字符串类型，直接用>或<比较时，会按照字符串的字符编码顺序进行对比，而非数值大小。比如当最小值是"100"、最大值是"99"时，字符串比较中"100"的第一个字符"1"编码小于"9"，会被判定为"100" < "99"，导致逻辑判断完全错误，进而引发最大值跳变或锁定的异常。

解决方案 #

将比较时的value转换为数值类型，使用Number()或parseInt()进行转换，确保是数值大小的对比。修改后的代码如下：

<head>
</head>
<body>
<div id="price-div"> </div>
<script>
const price_div = document.getElementById('price-div')

const min_price_range = document.createElement('input')
min_price_range.setAttribute('type','range')
min_price_range.setAttribute('min','1')
min_price_range.setAttribute('max','300')
min_price_range.setAttribute('value','20')

const div_display_min_price = document.createElement('div')
div_display_min_price.innerHTML = `Min price: ${min_price_range.value}$`

const max_price_range = document.createElement('input')
max_price_range.setAttribute('type','range')
max_price_range.setAttribute('min','1')
max_price_range.setAttribute('max','300')
max_price_range.setAttribute('value','50')

const div_display_max_price = document.createElement('div')
div_display_max_price.innerHTML = `Max price: ${max_price_range.value}$`

price_div.appendChild(min_price_range)
price_div.appendChild(div_display_min_price)
price_div.appendChild(max_price_range)
price_div.appendChild(div_display_max_price)

min_price_range.oninput = function(){
    const currentMin = Number(this.value)
    div_display_min_price.innerHTML = `Min price: ${currentMin}$`
    // 当最小值大于最大值时，同步最大值
    if (currentMin > Number(max_price_range.value)) {
        max_price_range.value = currentMin
        div_display_max_price.innerHTML = `Max price: ${currentMin}$`
    }
 }

 max_price_range.oninput = function(){
    const currentMax = Number(this.value)
    div_display_max_price.innerHTML = `Max price: ${currentMax}$`
    // 当最大值小于最小值时，同步最小值
    if (currentMax < Number(min_price_range.value)) {
        min_price_range.value = currentMax
        div_display_min_price.innerHTML = `Min price: ${currentMax}$`
    }
 }
</script>
</body>

额外优化建议 #

• 可以为max_price_range动态设置min属性为当前最小值，这样滑块无法拖动到最小值以下，避免不必要的逻辑触发：

  min_price_range.oninput = function(){
      const currentMin = Number(this.value)
      div_display_min_price.innerHTML = `Min price: ${currentMin}$`
      // 动态设置最大值滑块的最小值
      max_price_range.setAttribute('min', currentMin)
      if (currentMin > Number(max_price_range.value)) {
          max_price_range.value = currentMin
          div_display_max_price.innerHTML = `Max price: ${currentMin}$`
      }
   }
  

• 同理，为min_price_range动态设置max属性为当前最大值，进一步优化交互体验。

内容的提问来源于stack exchange，提问作者fasfrtewqt2354r2edrq