HTML范围滑块和jQuery？

Question

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

谢谢.

<input type="text" name="chance" id="chance" class="text" value="50">

<input type="range" id="chance" class="vHorizon" min="0.01" max="98" style="background-color: #00aec8; width: 50%;">

Answer 1

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

HTML

<input type="text" name="chance" id="chance" class="text" value="50">

<input type="range" id="chanceSlider" class="vHorizon" min="0.01" max="98" step="0.01" style="background-color: #00aec8; width: 50%;">

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

我发现有用的改进

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

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

Answer 4

第一个 ID 必须是唯一的。您可以使用 jQuery slider()。您可以在此处使用文本框来更新滑块中的值，反之亦然