Live output in jQuery HTML5 slider

Question

I am trying to get live output from an HTML5 input range slider into a javascript variable. Right now, I'm using <input type="range" id="rangevalue" onchange="arduino()">

The way I work does what I want, but it does not "live." I want it to be while you drag the slider, it updates the variable and not only after you release it. For example: when I drag the slider from 1 to 5, I want the variable to be updated during the drag, so it will be updated from 1,2,3,4,5 and not only go from 1 to 5 times. I release the slider.

Can this be done? Any recommendations? I used the jQuery slider plugin, but it was not compatible with touch, which fixed its purpose.

Thanks for the help!

EDIT - I didn’t have to explain well, I know how to get the value of the range slider, I just want to get a “live” output from it.

Answer 1

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

JsFiddle example

Or in plain JS:

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

Answer 2

Yes it is possible. We need to use .mousedown() and .mouseup() with a boolean value to track that we are holding the mousedown mouse. When the mouse is held down, set mousedown to true and use setTimeout , which continues to update the value. Thus, while you drag the slider, the value is constantly updated. For instance:

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 the fiddle

Answer 3

You can also use the oninput attribute.

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

Additional Info About Bugzilla

Answer 4

I think it works with your code.

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

Jsfiddle