input range滑块拖动未释放鼠标时如何实时触发事件

你当前绑定的change事件，针对type="range"的滑块控件，默认仅会在拖动操作结束（鼠标释放、键盘调整值后确认）时触发，无法响应拖动过程中的值实时变化，所以做不到不松手就更新音量。

将绑定的事件从change替换为原生input事件即可。input事件会在滑块值发生任何变动时立即触发，无论鼠标是否处于按下拖动状态，完全匹配你需要的实时更新需求。

• 如果你保留内联事件绑定的写法，直接替换事件属性即可：

<input type="range" min="0" max="100" value="100" class="slider" id="volume_slider" oninput="setVolume(this)">

• 如果你使用JS动态绑定事件，对应写法如下：

const volumeSlider = document.querySelector('#volume_slider');
volumeSlider.addEventListener('input', () => {
  setVolume(volumeSlider);
});

• 你的setVolume函数如果需要0-1区间的音量参数，直接在函数内将滑块值做归一化计算即可：滑块拖到中间位置时this.value为50，计算this.value / 100就能得到0.5的目标值。
• 不需要额外绑定mousemove等鼠标事件模拟实时效果，input事件是原生表单元素专门为实时值变更场景设计的，逻辑更简洁，也不会出现鼠标拖出滑块范围就事件失效的问题。
• 该方案兼容所有现代浏览器，若需要兼容IE10及更早版本，可额外补充绑定propertychange事件，常规业务场景无需额外处理。

内容的提问来源于stack exchange，提问作者MEDX