克隆Spotify网页：Range Input进度条已完成部分样式实现求助

要实现Spotify风格的进度条，核心是区分range input的已完成与未完成轨道部分，同时兼容主流浏览器。以下是完整实现方案：

完整代码 #

HTML #

<input type="range" min="0" max="100" value="0" />

CSS #

/* 基础样式与WebKit内核适配 */
input[type="range"] {
  height: 4px;
  appearance: none;
  width: 100%;
  margin: 2px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  /* 用CSS变量绑定进度值，实现动态渐变区分已完成/未完成部分 */
  background: linear-gradient(to right, green var(--value, 0%), #5e5e5e var(--value, 0%));
}

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none;
  height: 4px;
  border-radius: 8px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: green;
  margin-top: -4px; /* 调整滑块位置使其与轨道垂直居中 */
  transition: background-color 0.2s ease;
}

/* hover状态样式 */
input[type="range"]:hover {
  background: green;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background-color: white;
}

/* Firefox浏览器适配 */
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 8px;
  background: #5e5e5e;
}

input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 8px;
  background: green;
}

input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: green;
  border: none;
  transition: background-color 0.2s ease;
}

input[type="range"]:hover::-moz-range-track {
  background: green;
}

input[type="range"]::-moz-range-thumb:hover {
  background-color: white;
}

JavaScript（动态更新进度） #

const rangeInput = document.querySelector('input[type="range"]');

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

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

关键说明 #

1. WebKit内核适配：通过CSS变量--value绑定input当前值，结合线性渐变实现已完成（绿色）与未完成（灰色）轨道的区分，拖动时通过JS实时更新变量值。
2. Firefox适配：Firefox提供专属的::-moz-range-progress伪元素用于设置已完成轨道样式，无需额外JS处理渐变逻辑。
3. 滑块居中：通过margin-top调整WebKit滑块的垂直位置；Firefox滑块通过移除默认边框实现与轨道对齐。
4. 过渡效果：保留原代码的0.2s过渡动画，保证hover和拖动操作时的平滑视觉体验。

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