如何将input type range样式化为带进度区分的音乐进度条？

原生input range的进度区分效果，不同浏览器依赖各自的专属伪元素实现，自定义样式时不能只修改整体轨道颜色，需要针对性处理这些伪元素。以下是完整的跨浏览器实现方案：

1. 基础HTML结构 #

假设你的滑块HTML结构如下：

<input type="range" id="musicProgress" min="0" max="100" value="40">

2. 跨浏览器CSS样式 #

/* 重置滑块默认样式，让自定义伪元素生效 */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  background: transparent;
}

/* WebKit内核浏览器（Chrome、Safari） */
/* 自定义滑块手柄 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  margin-top: -5px; /* 垂直居中调整 */
}
/* 通过线性渐变实现进度区分，依赖CSS变量动态更新 */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #007bff var(--progress-percent), #e9ecef var(--progress-percent));
}

/* Firefox浏览器 */
/* 已播放进度段样式 */
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: #007bff;
}
/* 未播放轨道段样式 */
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #e9ecef;
}
/* 自定义滑块手柄 */
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: none; /* 移除Firefox默认边框 */
}

/* IE/Edge浏览器 */
/* 已播放进度段样式 */
input[type="range"]::-ms-fill-lower {
  height: 6px;
  border-radius: 3px;
  background: #007bff;
}
/* 未播放轨道段样式 */
input[type="range"]::-ms-fill-upper {
  height: 6px;
  border-radius: 3px;
  background: #e9ecef;
}
/* 自定义滑块手柄 */
input[type="range"]::-ms-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: none;
}
/* 移除IE默认轨道样式干扰 */
input[type="range"]::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
}

3. JS动态同步进度（针对WebKit浏览器） #

WebKit没有原生的已选中进度伪元素，需要通过CSS变量结合JS实时更新渐变位置：

const progressSlider = document.getElementById('musicProgress');

// 初始化进度变量
progressSlider.style.setProperty('--progress-percent', `${progressSlider.value}%`);

// 拖动滑块时更新进度
progressSlider.addEventListener('input', () => {
  progressSlider.style.setProperty('--progress-percent', `${progressSlider.value}%`);
});

// 音频播放时同步进度（示例）
// const audio = document.getElementById('musicAudio');
// audio.addEventListener('timeupdate', () => {
//   const percent = (audio.currentTime / audio.duration) * 100;
//   progressSlider.value = percent;
//   progressSlider.style.setProperty('--progress-percent', `${percent}%`);
// });

关键说明 #

• Firefox有专属的::-moz-range-progress伪元素，直接设置颜色就能实现进度区分，无需JS
• WebKit依赖线性渐变+CSS变量，通过JS同步滑块值与渐变分割点
• IE/Edge用::-ms-fill-lower和::-ms-fill-upper分别控制已选、未选轨道样式

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