javascript - 如何修复 javascript 没有分配正确的值？

Question

我试图存储最后一个小于 maxrange.value 的选定值，并在它不正确时使用它来更改 slider 值。当第一个值变为大于第二个值时，我希望它返回到低于第二个值的最后一个值。

    <input id="slider-min" type="range" value="14" min="1" max="20" step="1" oninput="checkifvaluemin()"/>
    <input id="slider-max" type="range" value="16" min="1" max="20" step="1" oninput="checkifvaluemax()"/>

      var minrange = document.getElementById("slider-min");
      var maxrange = document.getElementById("slider-max");
        function checkifvaluemin() {
          if (minrange.value < maxrange.value) {
            var lastvaluemin = minrange.value;
            minrange.value = lastvaluemin;
          }
        }
        function checkifvaluemax() {
          if (minrange.value > maxrange.value) {
            var lastvaluemax = maxrange.value;
            maxrange.value = lastvaluemax;
        }
}

lastvaluemin 正在跳过数字 2-9

Answer 1

我不是 100% 确定 OP 提供的描述，所以我将根据我认为 OP 问题是什么来概述。

1. 最小范围输入属性min总是小于 min最大范围输入的属性。

2. 最大范围输入属性max总是比 max 多最小范围输入的属性。

为了创建此行为，我们可以使用 oninput调整 min/max 的属性特性。这些值由 <output> 显示标签。

<form>

oninput=
// min range max property is at least 1 less than max range max property 
minIN.max = maxIN.valueAsNumber-1,
// max range min property is at least 1 more than min range min property
maxIN.min = minIN.valueAsNumber+1,
// displays the difference between min and max
minMax.value = maxIN.valueAsNumber - minIN.valueAsNumber

<input type="range">

oninput=
// The <output> of min and max ranges are synced to react when either one gets user input
// A poor man's two-way data-binding   
minOUT.value = this.value, 
maxOUT.value = maxIN.value
...
maxOUT.value = this.value, 
minOUT.value = minIN.value

:root {
  font: 400 16px/1.2 Consolas;
}

label,
input,
output {
  display: inline-block;
  font: inherit;
  height: 1.5rem;
  line-height: 1.5rem;
  vertical-align: middle;
}

[type=range] {
  width: 28.5vw;
}

label b {
  display: inline-block;
  width: 15vw;
}

.max {
  text-align: right;
}

.minMax {
  transform: translateY(100%);
  text-align: center; 
}

<form id='ui' oninput='minIN.max = maxIN.valueAsNumber-1, maxIN.min = minIN.valueAsNumber+1, minMax.value = maxIN.valueAsNumber - minIN.valueAsNumber'>

  <label class='min' for='minIN'><b>MIN:
  <output id='minOUT' for='minIN'>14</output></b><br>
  
  <input id="minIN" type="range" value="14" min="1" max="19" step="1" oninput="minOUT.value = this.value, maxOUT.value = maxIN.value">
</label>

  <label class='minMax' for='minMax'><b>SIZE:
<output id='minMax' for='maxIN minIN'>2</output></b>
</label>

  <label class='max' for='maxIN'><b>MAX:
  <output id='maxOUT' for='maxIN'>16</output></b><br>
  
  <input id="maxIN" type="range" value="16" min="2" max="20" step="1" oninput="maxOUT.value = this.value, minOUT.value = minIN.value">
</label>

</form>