Question

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

    <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

如果我了解您的要求，这应该确实是您想要的。

我更改了：

添加了许多日志记录，以便我们可以看到正在发生的事情。
将最小值/最大值记录为JSON，以便我们可以判断它们是字符串还是数字。
使用parseInt将最小值/最大值转换为整数，以便比较结果有意义。
您的第一个if声明的条件对我来说没有意义，因此我予以撤销。

在两个if语句中，您正在为其分配滑块的当前值。这将永远不会有效果。我对其进行了更改，以便为滑块分配另一个滑块的值，这使它们可以相互限制。

<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()"/>

<script>
    const minrange = document.getElementById("slider-min");
    const maxrange = document.getElementById("slider-max");

    function checkifvaluemin() {

        const min = parseInt(minrange.value);
        const max = parseInt(maxrange.value);

        console.log('min', JSON.stringify(min));
        console.log('max', JSON.stringify(max));

        if (min > max) {

            console.log('Checkifvaluemin min > max. Changing.');

            minrange.value = max;

        } else {

            console.log('Checkifvaluemin min <= max. Doing nothing.');
        }
    }

    function checkifvaluemax() {

        const min = parseInt(minrange.value);
        const max = parseInt(maxrange.value);

        console.log('min', JSON.stringify(min));
        console.log('max', JSON.stringify(max));

        if (min > max) {

            console.log('Checkifvaluemax min > max. Changing.');

            maxrange.value = min;

        } else {

            console.log('Checkifvaluemax min <= max. Doing nothing.');
        }
    }
</script>

Answer 2

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

最小范围输入属性min总是小于最大范围输入的min属性。
最大范围输入属性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>

如何解决JavaScript无法分配正确值的问题？

2 个答案:

`<form>`

`<input type="range">`