jquery - スライダーの値が変更されたときに内部HTMLを更新するjQuery

Question

私のhtml5ページに8つのスライダー（input type = "range"）。

これらのそれぞれについて、その横に値を書き込み、スライダーの値が変更されるたびに更新する必要があります。

これを1つのjqueryコールバックで実行したいと思います。

これまでのところ：

$('input[type="range"]').change(function(e) {
  // here I need to update the inner html for the relevant slider.
});

Answer 1

あなたはそれをつかむだけでそれを得ることができ、.val()その値をその隣のスパンの中に入れることができます。

$('input[type="range"]').on('change', function(e) {
    var _val = $(this).val();
    $(this).next('span').text(_val);
});​

jsFiddleデモ

Answer 2

このフィドルを参照してください：

// 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>
​