How to get input range during change with jquery?

Question

I'm using jQuery 2.1 in Chrome 41. I need to get the values from an input slider as it changes; however, when I use the change event with jquery, I only get the value from the slider after the mouse is released, not during the mousedown and drag.

This small example illustrates the problem:

<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" />

<br />

<span id="slider_value">Nothing yet.</span>

<script>
$(document).on('change', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});
</script>

I think I could come up with a fix by setting a boolean on mouse up/down events and then getting the values on mousemove events. Is there a cleaner solution?

Answer 1

In modern browsers you can use the input event:

$(document).on('input', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});

Note that IE < 9 does not support it but neither does it support range input

Reference: MDN input - Event

DEMO

Answer 2

You could listen to the change/input events:

Updated Example

The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed.

The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.

$(document).on('input change', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" />
<br />
<span id="slider_value"></span>

I'm sure listening to the input event alone would suffice too.

Answer 3

This worked for me. this uses JQuery and JS.

$("#slider").on("input change",(e)=>{
document.getElementById("label").value = `${e.target.value}`;});

It seems to me that selecting DOM elements and modifying attributes/values using the document.getElementById() gives you access to some attributes that JQuery doesnt..

In this case Im able to access the <input> value and change it accordingly by using the above code but that same code fails when using JQuery's selector... tried to interchangeably append .val,.text,.innerText,.html on both and only document.getElementById().text worked.

Im not sure if this has to do with <input>'s attributes but hey it worked.

Answer 4

Also, if you want the input range current value to move with slider, you may try this solution.

Answer 5

As an update to this for 2020 that some may find helpful. I was encountering an instance where I wanted to grab the current value of a slider as it was changed by the user which a lot of these questions answer but as an alternative.

I'm loading jQuery for other functions so this ends up mixing vanilla JS and jQuery but could easily be modified to use only vanilla JS if you're not loading jQuery.

$("#number-slider").mousemove(function(){
    $("#slider-value").text(document.getElementById("number-slider").value);
})

The slider has it's own ID where the value is derived from and then that value can be posted into an element with it's own unique ID. You could do whatever you want after grabbing the value though.

Some notes:

• jQuery Val cannot reference the current value of a slider after it has changed (or seemingly at any point) and attr will only grab the initial value. For this reason you have to use the javascript default getElementById function if you want to retrieve the value.
• Mousemove in jQuery basically allows you to fake a draggable event where anytime the mouse moves on the slider it actively checks the value. If the value changes you can update a visual element (or any background function) with whatever the value changes to as the user actively interacts with it. If you wanted to convert this to vanilla/pure JS you can implement the onmousemove event.
• Running a function or event every time the mouse moves within an element or the document can get somewhat weighty depending on what you're doing resulting in browser lag or other issues. So if you don't need some sort of constant visual update you can use the change() function in jQuery or onchange event in vanilla JS which will update the data only after the mouse is released from the slider and the new value is entered into memory/the change is detected.
• You could maybe use some sort of mousedown/mouseup style of tracking to detect these changes as well but I didn't try any of that because the example implemtnation was enough for me but just throwing that out there.

Answer 6

I found this answer for my question

<h3>How to view range change value.</h3>
<input
  type="range" id="myrange" value="50" min="0" max="500" 
  oninput="document.getElementById('outputVal').innerHTML = this.value" />
  <label id="outputVal"></label>
  

Answer 7

$('#slider').change(function(){
$('#slider_value').text($(this).val());
});