快速拖动HTML滑块数值跳变 如何实现不遗漏中间取值

原生range滑块的input、change事件触发频率和指针事件采样率、浏览器渲染帧率绑定，快速拖动时事件触发间隔远大于指针移动速度，回调拿到的值会直接跨过多个步长区间，原生组件本身不会自动补全中间跳过的步长值。

不要直接使用事件回调返回的瞬时值执行业务逻辑，自己补全两次事件触发之间跳过的所有步长值即可：

• 初始化时明确滑块的min、max、step三个核心属性，提前计算好单步步长，所有取值对齐步长做取整处理，规避浮点数精度问题
• 全局记录滑块上一次停留的有效基准值
• 每次事件触发拿到当前瞬时值后，先判断拖动方向，从基准值开始按步长逐次累加/递减，直到和当前瞬时值对齐，每遍历到一个步长值就执行业务回调
• 遍历完成后更新基准值为当前对齐后的有效值，作为下一次计算的起点

<input type="range" id="slider" min="0" max="100" step="5">
<script>
const slider = document.getElementById('slider')
// 记录上一次停留的有效值
let lastValue = Number(slider.value)
// 每遍历到一个步长值触发的回调，替换为自身业务逻辑即可
const onStepHit = (value) => {
  console.log('当前遍历值：', value)
}

const traverseSteps = (targetValue) => {
  const step = Number(slider.step)
  // 正向拖动逐值递增
  if (targetValue > lastValue) {
    for (let val = lastValue + step; val <= targetValue; val += step) {
      onStepHit(Number(val.toFixed(2))) // toFixed处理浮点数精度
    }
  }
  // 反向拖动逐值递减
  if (targetValue < lastValue) {
    for (let val = lastValue - step; val >= targetValue; val -= step) {
      onStepHit(Number(val.toFixed(2)))
    }
  }
  // 更新基准值
  lastValue = targetValue
}

// 拖动过程中实时计算
slider.addEventListener('input', (e) => {
  const rawVal = Number(e.target.value)
  // 对齐步长取整，消除原始值的精度偏差
  const alignedVal = Math.round(rawVal / Number(slider.step)) * Number(slider.step)
  traverseSteps(alignedVal)
})

// 拖动结束做兜底校准
slider.addEventListener('change', (e) => {
  const rawVal = Number(e.target.value)
  const alignedVal = Math.round(rawVal / Number(slider.step)) * Number(slider.step)
  traverseSteps(alignedVal)
})
</script>

注意：如果步长设置为小数，建议先把min、max、step统一放大为整数做遍历计算，最后再缩回对应精度，能彻底避免浮点数计算带来的取值偏差。

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