Chrome浏览器文本选中状态下input[type=range]滑块无法拖动的解决方案咨询

触发该问题的核心原因是页面存在选中的文本内容时，Chrome会将滑块上的拖动操作优先识别为文本拖动行为，因此会出现禁止光标、滑块无法拖动的问题。你之前尝试的方案无效的原因如下：

• 仅给input[type=range]设置user-select: none未加浏览器前缀，且样式未覆盖Chrome range控件的内部伪元素，因此不生效
• 监听drag事件无法拦截，触发该异常时浏览器优先触发的是dragstart事件，且默认行为优先级高于滑块拖动事件

下面是3种可直接生效的解决方案：

方案1：点击滑块时清空页面选中内容（最通用，不影响其他文本选中功能） #

仅在用户操作滑块时清除已选中的文本，不影响页面其他区域的正常选中文本功能，适配所有场景：

const range = document.querySelector('input[type="range"]');
range.addEventListener('mousedown', () => {
  // 清空页面所有已选中的内容
  const selection = window.getSelection();
  if (selection) selection.removeAllRanges();
});

方案2：禁止滑块所在区域的文本选中行为 #

如果滑块所在区域不需要支持文本选中，可以直接给父容器加禁用选中的样式，注意要补全浏览器前缀：

/* 替换为你滑块的父容器选择器 */
.range-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="range-container">
  <input type="range">
</div>

方案3：拦截包含滑块的选中行为 #

如果不需要禁止整个区域选中，仅防止选中内容覆盖滑块，可以监听全局选中开始事件：

document.addEventListener('selectstart', (e) => {
  // 如果选中的目标元素是range滑块或其子元素，阻止选中行为
  if (e.target.closest('input[type="range"]')) {
    e.preventDefault();
  }
});

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