如何最优实现range滑块值每发生变化就实时获取？

最优解决方案：使用input事件 #

这是HTML标准规范中明确支持的原生事件，专门适配表单控件值实时变化的监听场景，完全覆盖你需要的实时更新效果，同时不存在onmousemove的性能和适配问题。

优势说明

• 触发逻辑和滑块值更新完全同步：只要滑块的value发生变化就会触发，不管是鼠标拖动过程中、键盘方向键调整、触屏拖动操作都能正常响应
• 性能开销极低：触发频率和数值更新频率对齐，不会像onmousemove那样产生大量无意义的多余触发事件
• 全浏览器兼容：所有现代浏览器甚至IE9都支持该事件，不需要额外做兼容处理

代码实现

var slider = document.getElementById("slider")
// 替换为oninput即可
slider.oninput = function() {
  var currentVal = slider.value
  document.querySelector("b").innerText = "The current value is " + currentVal.toString()
}

<input type="range" id="slider" min="1" max="10" step="1" value="4">
<br>
<b>The current value is 4</b>

扩展用法

如果你的业务需要同时监听「用户结束调整值」的时机，可以同时绑定input和change事件：input事件负责实时更新页面展示的数值，change事件负责用户确认数值后执行后续业务逻辑（比如参数提交、关联计算等）。

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