CODEWITHSUNDEEP
jqueryhtml
PeteGO
PeteGO

Reputation: 5801

jQuery to update inner html when slider value changes

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

Answers (2)

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

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

jsFiddle Demo

Upvotes: 2

Josh
Josh

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

Related Questions