如何为HTML Range滑块轨道设置多段颜色？

你的代码存在两个核心问题：

1. 无效颜色值：#grey 是错误写法，灰色应使用 grey 或标准十六进制值（如 #888）
2. 渐变断点设置错误：要实现30%灰色、30%蓝色、30%灰色的分段，需要精准设置渐变的起止百分比

正确实现代码 #

首先需要重置浏览器默认的Range滑块样式，再通过线性渐变定义三段颜色轨道：

<input type="range" class="tri-color-slider">

/* 全局重置滑块默认样式 */
.tri-color-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  outline: none;
}

/* WebKit内核浏览器（Chrome/Safari）轨道样式 */
.tri-color-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  /* 精准分段：0-30%灰色，30%-60%蓝色，60%-100%灰色 */
  background: linear-gradient(to right,
    grey 0%, grey 30%,
    #82CFD0 30%, #82CFD0 60%,
    grey 60%, grey 100%
  );
}

/* WebKit内核滑块手柄样式 */
.tri-color-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #82CFD0;
  margin-top: -4px;
  cursor: pointer;
}

/* Firefox浏览器轨道样式 */
.tri-color-slider::-moz-range-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right,
    grey 0%, grey 30%,
    #82CFD0 30%, #82CFD0 60%,
    grey 60%, grey 100%
  );
  border: none;
}

/* Firefox浏览器滑块手柄样式 */
.tri-color-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #82CFD0;
  cursor: pointer;
}

关键说明 #

• 必须重置默认样式：浏览器自带的Range滑块样式会覆盖自定义渐变，因此需要用 -webkit-appearance: none 和 appearance: none 清除默认样式
• 渐变断点逻辑：通过设置 30% 和 60% 作为颜色切换点，严格实现三段各占30%（若要三等分可将断点改为 33.33% 和 66.66%）
• 跨浏览器兼容：分别处理WebKit和Firefox的伪元素，保证在主流浏览器中显示一致

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