如何在更改期间使用jquery获取输入范围？

Question

我在Chrome 41中使用jQuery 2.1.我需要从输入滑块中获取值,因为它会发生变化; 但是,当我使用jquery的change事件时,我只在鼠标释放后从滑块中获取值,而不是在mousedown和drag中.

这个小例子说明了这个问题:

<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" />

<br />

<span id="slider_value">Nothing yet.</span>

<script>
$(document).on('change', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});
</script>

我想我可以通过在鼠标上/下事件上设置布尔值然后获取mousemove事件的值来提出修复.有更清洁的解决方案吗？

Answer 1

在现代浏览器中,您可以使用该input事件:

$(document).on('input', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});

请注意,IE <9不支持它,但它也不支持range输入

参考:MDN输入 - 事件

DEMO

Answer 2

你可以听change/ inputevents:

更新的示例

当更改或元素的值时,将同步触发DOM input事件.<input><textarea>

该change事件被解雇<input>,<select>和<textarea>元素时,该元素的值的变化是由用户提交.与input事件不同,对于元素值的每次更改,都不一定会触发change事件.

$(document).on('input change', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" />
<br />
<span id="slider_value"></span>

我肯定只听这个input事件就足够了.