如何通过鼠标滚轮修改range类型input输入框的数值？

核心实现逻辑 #

• 给目标<input type="range">绑定wheel事件监听
• 通过事件对象的deltaY属性判断滚动方向：deltaY < 0为向上滚动，deltaY > 0为向下滚动
• 读取range元素自带的min、max、step属性作为数值调整的依据，没有设置对应属性时使用默认值（min默认0，max默认100，step默认1）
• 调整数值后手动触发input或change事件，保证关联的响应逻辑能正常触发
• 调用event.preventDefault()阻止默认行为，避免意外触发页面滚动，即使当前页面无滚动条也建议添加，增强兼容性

完整代码示例 #

<!-- HTML 结构 -->
<input type="range" id="testRange" min="0" max="100" step="1" value="50">

// 交互逻辑
const rangeInput = document.getElementById('testRange');

rangeInput.addEventListener('wheel', (e) => {
  // 阻止默认滚动行为
  e.preventDefault();

  // 读取range的配置参数，无设置则使用默认值
  const min = Number(rangeInput.min) || 0;
  const max = Number(rangeInput.max) || 100;
  const step = Number(rangeInput.step) || 1;
  let currentValue = Number(rangeInput.value);

  // 根据滚动方向调整数值
  if (e.deltaY < 0) {
    // 向上滚动，数值增加
    currentValue += step;
  } else {
    // 向下滚动，数值减少
    currentValue -= step;
  }

  // 边界处理，避免数值超出允许范围
  currentValue = Math.max(min, Math.min(max, currentValue));

  // 更新输入框数值
  rangeInput.value = currentValue;

  // 手动触发input事件，触发所有绑定在该输入框上的input监听逻辑
  rangeInput.dispatchEvent(new Event('input'));
});

扩展优化说明 #

• 若需要调整单次滚动的数值变化幅度，可给step乘自定义系数，例如currentValue += step * 3即可实现单次滚动调整3个单位
• 若存在多个range元素需要实现该效果，可将上述逻辑封装为通用函数，批量绑定事件即可

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