Блог

Главная - Вопросы по программированию - Как получить значение ползунка диапазона в режиме реального времени при перетаскивании ползунка?

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

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

У меня есть следующие 2 кнопки.

 <div class = "slider-container" style="">
    <div id = "x-slider" style="">
        X Axis<input id="XSlider" type="range" min="1.0" max="100.0" value="1.0" onChange="update()" /> 
    </div>
    <div id = "y-slider" style="">
        Y Axis<input id="YSlider" type="range" min="1.0" max="100.0" value="1.0" onChange="update()" /> 
    </div>
</div>

Вот update() функция.

 function update(){
    let x = document.getElementById("Xslider").value
    let y = document.getElementById("Yslider").value
    adjust(x, y)
}

update() Вызывает adjust() только после завершения перетаскивания кнопкой мыши. Как я могу вызвать update() функцию adjust() в режиме реального времени во время перетаскивания ползунка, а не только после завершения перетаскивания?

Ответ №1:

Попробуйте это:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class = "slider-container" style="">
        <div id = "x-slider" style="">
           X Axis:  <span id="x"></span><input id="XSlider" type="range" min="1.0" max="100.0" value="1.0" oninput="update()"> 
        </div>
        <div id = "y-slider" style="">
           Y Axis : <span id="y"></span><input id="YSlider" type="range" min="1.0" max="100.0" value="1.0" oninput="update()"> 
        </div>
    </div>


    <script>
        function update(){
            let x = document.getElementById("XSlider").value;
            let y = document.getElementById("YSlider").value;

            document.getElementById("x").innerText = x;
            document.getElementById("y").innerText = y;
        }
    </script>
</body>
</html>

Редактировать: Пожалуйста, обратите внимание, что событие onInput не поддерживается в IE

Ответ №2:

Я думаю, что вы хотите изменить onchange на oninput.

Комментарии:

1. Этот ответ правильный, но было бы лучше, если бы вы также предоставили пример и объяснение.

Ответ №3:

Это должно сработать, проверьте, чтобы увидеть значение консоли

 var x = document.getElementById('XSlider')
var y = document.getElementById('YSlider')

function update( e ){
  console.log( e.target.value )
}

x.addEventListener('input', update );
y.addEventListener('input', update );  
 <div class="slider-container" style="">
  <div id="x-slider" style="">
    X Axis<input id="XSlider" type="range" min="1.0" max="100.0" value="1.0" onChange="update">
  </div>
  <div id="y-slider" style="">
    Y Axis<input id="YSlider" type="range" min="1.0" max="100.0" value="1.0">
  </div>
</div>