Início / coding / Perguntas / 79438256
Accepted
user500665
Asked: 2025-02-14 11:02:35 +0800 CST

Limitar a entrada de intervalo com base em outra entrada de intervalo com javascript [duplicado]

  • 772

Tenho duas entradas de alcance. A primeira nunca deve ser maior que a segunda, e a segunda nunca deve ser menor que a primeira.

O problema com meu script é que os controles deslizantes pulam ou se encaixam no mínimo ou máximo. Funciona perfeitamente se eu alterar o limite para um número fixo, mas não com o valor de entrada...

Aqui está um exemplo do que tentei:

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 respostas

  1. Best Answer

    É porque .valueretorna uma string, então você está fazendo uma comparação de strings (o que significa que "1" >= "100" é verdadeiro, o que não é o que você quer). Você pode obter versões numéricas do seu valor com .valueAsNumberem vez de .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>

    Como alternativa, você pode continuar a usar .valuee, em seguida, usar o operador unário mais + , Number()a função ou parseInt(value, 10)para converter seu valor em um valor numérico.

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

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

relate perguntas