主页 / coding / 问题 / 79438256
Accepted
user500665
Asked: 2025-02-14 11:02:35 +0800 CST

使用 javascript 根据另一个范围输入限制范围输入[重复]

  • 772

我有两个范围输入。第一个输入永远不应高于第二个输入，第二个输入永远不应低于第一个输入。

我的脚本的问题是滑块会跳动或突然跳到最小值或最大值。如果我将限制更改为固定数字，它会完美运行，但输入值则不行……

以下是我尝试过的一个例子：

function minRange(input) {
    let limit = document.getElementById('max').value;           
    if(input.value >= limit) {
        input.value = limit;
    };
};

function maxRange(input) {
    let limit = document.getElementById('min').value;   
    if(input.value <= limit) {
        input.value = limit;
    };
};
<div><input id="min" type="range" min="0" max="100" value="0" step="1" onInput="minRange(this)" /></div>
<div><input id="max" type="range" min="0" max="100" value="100" step="1" onInput="maxRange(this)" /></div>

javascript

2 个回答

  1. Best Answer

    这是因为.value返回一个字符串，所以您正在进行字符串比较（这意味着“1”> =“100”为真，这不是您想要的）。您可以使用.valueAsNumber而不是获取值的数字版本.value：

    function minRange(input) {
    let limit = document.getElementById('max').valueAsNumber;
    if(input.valueAsNumber >= limit) {
        input.value = limit;
    };
};

function maxRange(input) {
    let limit = document.getElementById('min').valueAsNumber;   
    if(input.valueAsNumber <= limit) {
        input.value = limit;
    };
};
    <div><input id="min" type="range" min="0" max="100" value="0" step="1" onInput="minRange(this)" /></div>
<div><input id="max" type="range" min="0" max="100" value="100" step="1" onInput="maxRange(this)" /></div>

    或者，您可以继续使用.value，然后使用一元加号 + 运算符、Number()函数或parseInt(value, 10)将您的值转换为数值。

    • 3 
  2.  function minRange(input) {
    document.getElementById('max').setAttribute('min', input.value);
    
};

function maxRange(input) {
    document.getElementById('min').setAttribute('max', input.value);
};
    • -2

相关问题