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
.
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); });});