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

Question

我的页面上有一个使用标准 html 5:

的滑块

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

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

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

Answer 1

您可以像

一样使用input事件

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

<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" />

Event that triggers when slider changes value, but mouse button is not yet released