如何让<input type="range">在触屏设备上支持滑动拖拽？

算力阿峰

2026-7-13

关于标准<input type="range">触摸拖拽的问题

问题现象

使用标准<input type="range">元素时，触屏设备上无法拖拽滑块，仅能点击轨道移动滑块位置；鼠标操作时则可正常点击并自由拖拽。可在触屏设备或浏览器开发者工具模拟触摸事件测试以下代码：

<input type="range">

桌面端/鼠标操作行为（基于Firefox浏览器）

桌面端鼠标操作演示

触屏操作行为（通过Firefox响应式设计模式模拟触摸事件）

触屏操作演示

解决方案

标准<input type="range">在现代主流触屏浏览器中本应支持触摸拖拽，出现该问题大概率是浏览器版本兼容性问题或交互逻辑被干扰，可按以下步骤处理：

升级浏览器版本
旧版Firefox在触摸事件处理上存在已知bug，将浏览器升级至最新稳定版，多数情况下能直接解决触摸拖拽失效的问题。
手动绑定触摸事件（兜底方案）
若升级浏览器后问题仍存在，可通过监听触摸事件手动实现拖拽逻辑，示例代码如下：

const range = document.querySelector('input[type="range"]');
let dragging = false;

range.addEventListener('touchstart', (e) => {
  dragging = true;
  e.preventDefault(); // 避免浏览器默认触摸行为干扰
});

range.addEventListener('touchmove', (e) => {
  if (!dragging) return;
  const rect = range.getBoundingClientRect();
  const touchPos = e.touches[0].clientX - rect.left;
  const ratio = Math.max(0, Math.min(1, touchPos / rect.width));
  range.value = ratio * (range.max - range.min) + parseFloat(range.min);
  // 触发input事件，确保关联业务逻辑响应值变化
  range.dispatchEvent(new Event('input'));
});

range.addEventListener('touchend', () => {
  dragging = false;
});