How to get input range during change with jquery?

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.


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

Tags:

Jquery