CODEWITHSUNDEEP
javascriptjqueryhtmlinputrange
Darryl Huffman
Darryl Huffman

Reputation: 2579

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.

Upvotes: 6

Views: 9190

Answers (6)

yarns
yarns

Reputation: 247

To update while dragging the slider, listen for the mousemove event.

For this solution, the target range input element (slider), uses a mousemove event handler that will update for the current (live) position value of the slider.

To limit movement detection to when the slider is being dragged:

  • On mousedown, attach a handler for mousemove events.
  • On mouseup, remove the mousemove handler.

This is in addition to a change event handler, which is the advised way of getting any final changes to an elements value.

Try it on fiddle ⎤↗︎


<input type="range" id="rangevalue">



var rangevalue = document.getElementById('rangevalue');

rangevalue.addEventListener("change",    arduino);
rangevalue.addEventListener("mousedown", enabletracking);
rangevalue.addEventListener("mouseup",   disabletracking);

function enabletracking()  { rangevalue.addEventListener(   "mousemove", arduino); }
function disabletracking() { rangevalue.removeEventListener("mousemove", arduino); }

Touch Support

Further more you may want to add touch support as some browsers handle things differently.

One thing is touch events can trigger other events we are listening to which will cause problems if we're updating from everywhere. Disabling this default behaviour is possible but has other side effects. For example, page scrolling is usually handled by touch events and will not work while default behaviour is disabled.


rangevalue.addEventListener("touchstart",  enableTouchTracking );
rangevalue.addEventListener("touchend",    disableTouchTracking);
rangevalue.addEventListener("touchcancel", disableTouchTracking);

function enableTouchTracking(event)
 {
    event.preventDefault();
    rangevalue.addEventListener("touchmove", handleTouchMove);
 }
function disableTouchTracking(event) 
 {
    event.preventDefault();
    rangevalue.removeEventListener("touchmove", handleTouchMove);
 }
function handleTouchMove(event)
 {
    event.preventDefault();
    arduino();
 }

Upvotes: 0

lokesh khinchi
lokesh khinchi

Reputation: 94

I think, this solution a good fit for this problem

$("#rangevalue").on("input", function(){ 
  updateSlider() 
});

function updateSlider() {
    // Update the value while the mouse is held down.
    $("#text").text($("#rangevalue").val());
    setTimeout(updateSlider, 50); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label id="text">0</label>
<input type="range" value=0 min=0 max=10 id="rangevalue">

Upvotes: 0

Moritz Ha
Moritz Ha

Reputation: 46

You could also use the oninput attribute.

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

More Information on Bugzilla

Upvotes: 2

j08691
j08691

Reputation: 207861

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

Upvotes: 13

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21565

Yes it is possible. What we need to do is use .mousedown() and .mouseup() with a Boolean value to keep track that we are holding down the mouse mousedown. When the mouse is held down set mousedown to true and use a setTimeout that keeps updating the value. This way while you are dragging slider the value is being constantly updated. For example:

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

Upvotes: 3

Moritz Ha
Moritz Ha

Reputation: 46

I think it is working 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

Upvotes: -1

Related Questions