jQuery更新內部html滑塊值更改

Question

我的html 5頁面上的8個滑塊（輸入類型=「範圍」）。

對於每個這些我想要寫在它旁邊的值，並更新每次滑塊值更改。

我想在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 Demo

Answer 2

見this小提琴：

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