滑块更改值时触发的事件，但鼠标按钮尚未释放

Question

我的页面上有一个使用标准html 5的滑块：

<input type="range" min="0" max="100" step="10"/>

当用户通过向左或向右拖动来更改滑块值时，javascript / jquery更改效果不会触发，直到用户放开鼠标按钮。我想知道如何创建一个事件，每当滑块上升一步时触发，而不是用户释放鼠标。

使用mousedown和mousemove事件并计算移动的像素数量似乎是一种非常复杂且错误的处理方法。

Answer 1

您可以使用input事件，例如

＆＃13;

＆＃13;

$(document).on('input', '[type="range"]',
  function() {
    console.log($(this).val());
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="range" min="0" max="100" step="10" />

＆＃13;

＆＃13;

＆＃13;