Vue中如何禁用input type=range默认拖拽且不影响点击功能？

核心思路是阻断滑块的拖拽交互逻辑，同时不影响点击轨道跳转数值的原生功能，以下是两种常用实现方案： #

方案1：纯CSS实现（优先推荐） #

通过禁用滑块元素的鼠标事件，让用户无法选中拖动滑块，但点击轨道的事件仍可正常触发，代码量极小、兼容性好：

/* 兼容Chrome、Safari等Webkit内核浏览器 */
.custom-audio-slider::-webkit-slider-thumb {
  pointer-events: none;
}
/* 兼容Firefox */
.custom-audio-slider::-moz-range-thumb {
  pointer-events: none;
}
/* 兼容旧版Edge */
.custom-audio-slider::-ms-thumb {
  pointer-events: none;
}

你原有HTML代码无需做任何修改，引入上述CSS即可生效：

<input   
  type="range"
  min="0"
  max="100"
  step="1"
  class="custom-audio-slider"
/>

方案2：JS实现（适合需要自定义扩展的场景） #

如果需要在禁用拖拽的同时添加其他交互逻辑（比如拖拽时弹出提示），可以通过JS监听鼠标事件实现：

const audioSlider = document.querySelector('.custom-audio-slider')
let dragFlag = false
// 记录滑块原始值，可根据需求决定是否需要拖拽后回滚
let originValue = audioSlider.value

audioSlider.addEventListener('mousedown', () => {
  dragFlag = false
  originValue = audioSlider.value
})

audioSlider.addEventListener('mousemove', (e) => {
  // 检测到鼠标左键按住移动时判定为拖拽
  if (e.buttons === 1) {
    dragFlag = true
    e.preventDefault()
  }
})

audioSlider.addEventListener('mouseup', (e) => {
  if (dragFlag) {
    e.preventDefault()
    // 若需要拖拽后回滚到原值，可打开下行注释
    // audioSlider.value = originValue
  }
})

补充说明 #

两种方案均不会影响点击修改滑块数值、键盘方向键调整数值的原生功能，若需要额外禁用键盘调整，可以补充以下代码：

audioSlider.addEventListener('keydown', (e) => {
  e.preventDefault()
})

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