WebKit内核浏览器中，input range的::-moz-range-progress等效属性是什么？

你提到的这段代码可在Firefox中将.amplitude-song-slider类的range滑块进度条设置为蓝色：

input[type='range'].amplitude-song-slider::-moz-range-progress {
  height: 5px;
  background: var(--bs-blue);
}

但它在Chrome等WebKit内核浏览器中无效，原因是WebKit没有对应::-moz-range-progress的原生伪元素，需通过自定义轨道样式结合渐变（必要时配合JS）模拟相同效果。

等效实现方案 #

以下是WebKit内核浏览器的完整CSS代码，可实现一致的蓝色进度条效果：

/* 重置滑块默认样式 */
input[type='range'].amplitude-song-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

/* 自定义滑块轨道：用渐变模拟进度 */
input[type='range'].amplitude-song-slider::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 2.5px;
  /* 默认状态进度为0 */
  background: linear-gradient(to right, var(--bs-blue) 0%, #ccc 0%);
}

/* 自定义滑块拇指 */
input[type='range'].amplitude-song-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--bs-blue);
  border-radius: 50%;
  /* 让拇指垂直居中于轨道 */
  margin-top: -5.5px;
}

/* 聚焦时移除默认轮廓，保持样式统一 */
input[type='range'].amplitude-song-slider:focus {
  outline: none;
}

动态更新进度（需配合JS） #

上面的CSS默认进度为0，要实现拖动滑块时实时更新进度，需添加一段简单的JavaScript：

document.querySelectorAll('input[type="range"].amplitude-song-slider').forEach(slider => {
  // 初始化进度
  const updateProgress = () => {
    const valuePercent = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
    slider.style.setProperty('--progress', `${valuePercent}%`);
  };
  updateProgress();
  // 拖动时更新进度
  slider.addEventListener('input', updateProgress);
});

随后将轨道的渐变样式修改为：

input[type='range'].amplitude-song-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--bs-blue) var(--progress), #ccc var(--progress));
}

这样就能在Chrome等WebKit内核浏览器中实现和Firefox一致的蓝色滑块进度条效果。

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