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