JQuery Range Input Listener JQuery Range Input Listener javascript javascript

JQuery Range Input Listener


$('input[type=range]').on('input', function () {    $(this).trigger('change');});

This fires the change event on every input event.


Does not seem to have any problem on HTML5 <input type="range"> using change.

See: http://jsfiddle.net/DerekL/BaEar/33/


I assume your span has an id: <span id="slidernumber">...</span>Lets also assume that you have a few sliders, and you want to see a text change if any of them were moved:

<li>Apply Credits1: <input type="range" min="0" max="100" name="discount_credits1" id="discount_credits" /></li><li>Apply Credits2: <input type="range" min="0" max="100" name="discount_credits2" id="discount_credits" /></li><span id="slidernumber">50</span>

Try this:

$(document).ready(function(){  $("[type=range]").change(function(){    var newval=$(this).val();    $("#slidernumber").text(newval);  });});

http://jsfiddle.net/MahshidZeinaly/CgQ5c/

Now lets assume that you have a few sliders, but you want to see a text change if a particular one of them were moved. (I assume it because the range input is inside li tag, and you gave it a name):

<li>Apply Credits1: <input type="range" min="0" max="100" name="discount_credits1" id="discount_credits" /><span id="slidernumber">50</span></li><li>Apply Credits2: <input type="range" min="0" max="100" name="discount_credits2" id="discount_credits" /><span id="slidernumber">50</span></li>

Try this:

$(document).ready(function(){  $("[type=range]").change(function(){    var newv=$(this).val();    $(this).next().text(newv);  });});

http://jsfiddle.net/MahshidZeinaly/2pe7P/1/