Как получить значение диапазона слайдера и сохранить его в переменной в JavaScript

Question

Как получить ползунок диапазона для сохранения выходных данных в виде переменной (которая затем будет установлена ​​как сеанс)

Спасибо за помощь

* удалили <и>, чтобы отобразить его с кодом

Ниже мой код (который не работает)

HTML код:

    input type="range" min="1" max="100" value="50" class="slider" id="range"
    Value: span id="value" /span
    Value: span id="outputVar" /span

Код JavaScript:

    var slider = document.getElementById("range");
    var output = document.getElementById("value");
    var outputVarNo = document.getElementById("outputVar");
    output.innerHTML = slider.value;

Answer 1

Ваш пример «работает» в том смысле, что он отображает значение диапазона, как вы описали.Это не обновляет значение, потому что ваш код JS будет выполняться только один раз при запуске.Чтобы выполнить ваш код и обновить вывод при каждом изменении ввода диапазона, используйте прослушиватель событий:

  var slider = document.getElementById("range");
  var output = document.getElementById("value");
  var outputVarNo = document.getElementById("outputVar");

  let update = () => output.innerHTML = slider.value;

  slider.addEventListener('input', update);
  update();

<input type="range" min="1" max="100" value="50" class="slider" id="range">
Value: <span id="value"></span>
Value: <span id="outputVar"></span>

Answer 2

Возможно, вы захотите добавить событие onChange к вашему ползунку.

var slider = document.getElementById("range");
slider.onchange = function(event){
  var output = document.getElementById("outputVar");
  output.innerHTML = slider.value;
}

Ответ, предоставленный @ junvar , лучше для живых обновлений. Кроме того, addEventListener лучше IMO, чем непосредственно с помощью oninput