Reputation: 5801
8 sliders on my html 5 page (input type="range").
For each of these I want the value written next to it, and to update each time the slider value changes.
I would like to do this in 1 jquery callback.
So far I have:
$('input[type="range"]').change(function(e) {
// here I need to update the inner html for the relevant slider.
});
Upvotes: 0
Views: 894
Reputation: 67219
You can get it by simply grabbing the .val()
of it, and putting that value inside of a span next to it.
$('input[type="range"]').on('change', function(e) {
var _val = $(this).val();
$(this).next('span').text(_val);
});
Upvotes: 2
Reputation: 12566
See this fiddle:
// js
$("input[type=range]").change(function(){
$("#" + $(this).attr("id") + "_value").text( $(this).val() );
});
// html
<input id="range1" type="range" min="1" max="5" /><span id="range1_value"></span>
<br />
<input id="range2" type="range" min="1" max="5" /><span id="range2_value"></span>
Upvotes: 1