Range Slider点击/拖动后按方向键步长双倍生效问题求助

我有一个Range Slider，要求滑块值小于36时步长为1，大于等于36时步长为3。通过键盘左右方向键的keydown事件控制滑块，原本功能正常，但点击或拖动滑块后再用方向键，步长会被应用两次。排查发现步长本身没翻倍，但rangeSlider.value被重复加减了一次步长——点击滑块后触发keydown，控制台的'here2'日志显示数值变化是步长的两倍，找不到原因。怎么实现点击滑块后，方向键控制时rangeSlider.value按正确步长增减？

原因 #

点击或拖动滑块后，Range Slider会自动获得焦点。此时按下方向键，浏览器默认的Range控件键盘导航行为会触发一次步长增减，同时你的自定义keydown事件又手动执行了一次增减逻辑，两者叠加就导致数值变化是步长的两倍。

解决方案 #

在keydown事件处理函数中添加e.preventDefault()，阻止浏览器的默认键盘导航行为，这样就只会执行你自定义的步长计算逻辑。

另外可以优化两处逻辑：

• 无需每次触发keydown都修改step属性，自定义逻辑已经处理了步长变化，这个属性可以省略（如果没有其他依赖step的功能需求）
• 简化步长计算和值更新的代码结构

修改后的代码 #

HTML

<input type='range' min='0' max='84' value='0' id='range-slider' class='slider'/>

JavaScript

const rangeSlider = document.getElementById('range-slider');

document.addEventListener('keydown', function(e) {
  // 只处理左右方向键，其他按键直接返回
  if (![37, 39].includes(e.keyCode)) return;

  // 阻止浏览器默认的Range控件键盘行为
  e.preventDefault();

  const currentValue = parseInt(rangeSlider.value);
  // 根据当前值计算步长
  const step = currentValue >= 36 ? 3 : 1;

  if (e.keyCode === 39) {
    rangeSlider.value = currentValue + step;
  } else if (e.keyCode === 37) {
    rangeSlider.value = currentValue - step;
  }
});

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