如何使用JavaScript高亮处于激活状态的滑块？

这个需求特别实用，尤其是用户用键盘操作多个滑块时，清晰的高亮反馈能大幅提升操作体验。其实用CSS的:focus伪类就能完美解决，配合一些自定义样式，让激活的滑块一眼就能被识别出来。下面是完整的实现步骤和代码：

1. 基础HTML结构 #

先设置两个带标签的滑块，方便用户识别每个滑块的用途：

<div class="slider-group">
  <label for="slider1">音量调节</label>
  <input type="range" id="slider1" min="0" max="100" value="50">
</div>

<div class="slider-group">
  <label for="slider2">亮度调节</label>
  <input type="range" id="slider2" min="0" max="100" value="50">
</div>

2. CSS样式实现 #

首先我们需要重置浏览器默认的滑块样式（不同浏览器默认样式差异较大），然后定义普通状态和激活（focus）状态的高亮效果：

/* 全局滑块基础样式 */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e0e0e0;
  outline: none;
  margin: 8px 0;
  transition: background 0.2s ease;
}

/* 滑块按钮（拇指）的默认样式 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2196F3;
  cursor: pointer;
  transition: all 0.2s ease;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2196F3;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

/* 激活（focus）状态的高亮核心 */
input[type="range"]:focus {
  background: #bdbdbd; /* 轨道颜色加深，强化状态区分 */
}

input[type="range"]:focus::-webkit-slider-thumb {
  width: 24px; /* 按钮放大，增强视觉焦点 */
  box-shadow: 0 0 0 5px rgba(33, 150, 243, 0.2); /* 扩散阴影，突出激活感 */
}

input[type="range"]:focus::-moz-range-thumb {
  width: 24px;
  box-shadow: 0 0 0 5px rgba(33, 150, 243, 0.2);
}

/* 可选：联动标签高亮，体验更连贯 */
.slider-group:focus-within label {
  color: #2196F3;
  font-weight: 600;
}

3. 效果说明 #

• 当用户点击滑块或者通过Tab键切换选中滑块（支持键盘箭头键精准调整）时，:focus伪类会触发，滑块轨道颜色加深、按钮放大并带有扩散阴影，用户能立刻明确当前操作的是哪个滑块。
• 额外添加的.slider-group:focus-within可以让对应的标签同步高亮，进一步增强视觉关联，提升整体体验。
• 所有样式都加了transition过渡动画，让状态切换更平滑，不会显得突兀。

这个方案完全适配键盘操作场景，兼容性覆盖了Chrome、Firefox、Safari等主流浏览器，完美满足你的需求。

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