HTML Range Slider和jQuery？

我在我的网站上有以下代码，并使用HTML5集成了一个范围滑块。 我希望滑块用值更新文本输入，反之亦然。 我会用jQuery做到这一点吗？ 如果是这样，你可以给我示例代码吗？

谢谢。

Answer 1

您可以在文本框上使用滑块和keyup事件上的change事件来更新值。

HTML

jQuery的

 $('#chanceSlider').on('change', function(){ $('#chance').val($('#chanceSlider').val()); }); $('#chance').on('keyup', function(){ $('#chanceSlider').val($('#chance').val()); }); 

和jsfiddle一起玩

http://jsfiddle.net/tDkEW/1/

Answer 2

如果你想实时刷新这个值，可以使用mousemove ，或者你可以只使用change但它不是实时的。

 $('yourselector').on('mousemove change',function() { //your code }); 

Answer 3

你绝对可以使用jQuery。

 $('input#chance').on('change', function() { $('input[name=chance]').val($(this).val()); }); $('input[name=chance]').on('change keyup', function() { $('input#chance').val($(this).val()); }); 

Answer 4

是的，你可以用html5元素和jQuery来做，像这样：

http://jsfiddle.net/sRbHZ/

HTML：

JS：

 var slider = $('#chance_slider'), textbox = $('#chance'); slider.change(function() { var newValue = parseInt($(this).val()); textbox.val(newValue); }); textbox.change(function() { var newValue = parseInt($(this).val()); slider.val(newValue); }); 

编辑

允许小数：

 var slider = $('#chance_slider'), textbox = $('#chance'); slider.change(function() { var newValue = $(this).val(); textbox.val(newValue); }); textbox.change(function() { var newValue = $(this).val(); slider.val(newValue); }); 

Answer 5

我觉得有用的改进

$('#chanceSlider').on('input change', function(){ $('#chance').val($('#chanceSlider').val()); });

jsfiddle http://jsfiddle.net/tDkEW/408/

Answer 6

第一个ID必须是唯一的。你可以使用jQuery slider（） 。你可以在这里使用文本框来更新滑块中的值，反之亦然

Answer 7

我建议缓存jquery选择器以提高性能。
此外，ID必须是唯一的，请参阅小提琴。

 var $chance_txt = $('#chance_txt'), $chance_slider = $('#chance_slider').on('change', function() { $chance_txt.val($chance_slider.val()); }); 

的jsfiddle

Answer 8

首先让你的id独一无二。

HTML

JQuery的

 $('#slider').on('change',function(){ $('#display').val($('#slider').val()); });