Входная функция Range Slider не выполняется при нажатии и перетаскивании - PullRequest
Новая
       8

Входная функция Range Slider не выполняется при нажатии и перетаскивании

0 голосов
/ 11 июня 2018

У меня есть простой ползунок диапазона, определенный следующим образом: 

    <input class="panning-control" type="range" min="0" max="100" step="1" value="0">

В теге Javascript я объявляю 

var panControl = document.querySelector('.panning-control');

и затем имею следующую функцию ввода: 

panControl.oninput = function() {
  //a bunch of irrelevant computations involving panControl.value
}

Проблема в том, что когда я быстро нажимаю и перетаскиваю ползунок, функция oninput не выполняется для каждого «шага».например, если я щелкнул и перетащил ползунок от 0 до 50, функция oninput должна теоретически выполняться 50 раз, потому что step = 1, а ползунок перешел от 0 до 50. Прямо сейчас, если вы щелкаете и перетаскиваете ползунок, он пропускает выполнениефункции из большинства шагов, и вычисления, которые я делаю в oninput, выполняются с неправильными числами, потому что каждое выполнение функции зависит от вычислений, выполненных из последнего выполнения.Это сработает, если я просто нажму на ползунок один раз, а затем с помощью клавиш со стрелками влево и вправо увеличит или уменьшит ползунок.У кого-нибудь есть решение для этого?Могу ли я использовать еще одну ручку / блок управления?

1 Ответ

0 голосов
/ 11 июня 2018

Попробуйте использовать метод addEventListener (событие, обработчик, пузыри) 

var panControl = document.querySelector('.panning-control');
panControl.addEventListener("input", function(evt) {
    doSomething(evt.target.value);
}, false);

function doSomething(value) {
    var output = document.querySelector('.output');
    output.textContent = value;
}
  <input class="panning-control" type="range" min="0" max="100" step="1" value="0" />
<span class="output"></span>
...