Живой вывод в слайдере диапазона jQuery HTML5

Question

Я пытаюсь получить живой вывод из ползунка диапазона ввода HTML5 в переменную javascript. Прямо сейчас, я использую <input type="range" id="rangevalue" onchange="arduino()">

То, как я работаю, делает то, что я хочу, но это не «живое». Я хочу, чтобы это было, пока вы перетаскиваете ползунок, он обновляет переменную и не только после того, как вы отпустите. Например: когда я перетаскиваю ползунок от 1 до 5, я хочу, чтобы переменная обновлялась во время перетаскивания, поэтому она будет обновляться с 1,2,3,4,5 и не только переходить от 1 до 5 раз Я отпускаю слайдер.

Можно ли это сделать? Любые рекомендации? Я использовал плагин слайдера jQuery, но он не был совместим с touch, что устранило его цель.

Благодарим за помощь!

EDIT - Я не должен был объяснять достаточно хорошо, я знаю, как получить значение ползунка диапазона, я просто хочу получить от него «живой» вывод.

Answer 1

$("#rangevalue").mousemove(function() { 
    $("#text").text($("#rangevalue").val()) 
}) 

jsFiddle example

Или в равнинных JS:

var inp = document.getElementById('rangevalue'); 
inp.addEventListener("mousemove", function() { 
    document.getElementById('text').innerHTML = this.value; 
}); 

Answer 2

Да, это возможно. Нам нужно использовать .mousedown() и .mouseup() с булевым значением, чтобы отслеживать, что мы удерживаем мышь mousedown. Когда мышь удерживается, установите mousedown в значение true и используйте setTimeout, который продолжает обновлять значение. Таким образом, пока вы перетаскиваете слайдер, значение постоянно обновляется. Например:

HTML

<label id="text">0</label> 
<input type="range" value=0 min=0 max=10 id="rangevalue"> 

JavaScript

var mouseDown = false 

$("#rangevalue").mousedown(function() { 
    mouseDown = true; 
    updateSlider() 
}); 

$("#rangevalue").mouseup(function() { 
    mouseDown = false; 
}); 

function updateSlider() { 
    if(mouseDown) { 
     // Update the value while the mouse is held down. 
     $("#text").text($("#rangevalue").val()); 
     setTimeout(updateSlider, 50); 
    } 
} 

Here is a fiddle

Answer 3

Я думаю, что он работает с вашим кодом.

<input type="range" id="rangevalue" onchange="arduino()"> 
<p id="t"></p> 
    <script> 
     function arduino() { 
    document.getElementById("t").innerHTML = document.getElementById("rangevalue").value; 
}</script> 

JSFiddle

Answer 4

Можно также использовать атрибут oninput.

<input type="range" min="5" max="10" step="1" 
    oninput="arduino()" onchange="arduino()"> 

More Information on Bugzilla