Search code examples
javascriptjqueryhtmlinputrange

Live output in jQuery HTML5 range slider

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

The way I have it working is doing what I want, but it's not "live." I want to have it so while you're dragging the slider, it updates the variable, and not only once you let go. For example: when I'm dragging the slider from 1 to 5, I want the variable to update while I'm dragging, so it will update with 1,2,3,4,5 and not only jump from 1 to 5 once I release the slider.

Is it possible to do such a thing? Any recommendations? I was using the jQuery slider plugin, but it was not touch compatible, which eliminated its purpose.

Thanks for all help in advance!

EDIT - I must not have explained well enough, I know how to get the value of a range slider, I just want to get a "live" output from it.

Solution 
  • $("#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;
});