如何使范围滑块的左侧与滑块右侧的颜色不同？答案

【问题标题】：How to make the left side of a range slider a different color than the right side of the slider?如何使范围滑块的左侧与滑块右侧的颜色不同？
【发布时间】：2019-05-12 20:11:21
【问题描述】：

查找有关如何根据可拖动部分的哪一侧更改滑块颜色的信息，例如 HTML5 视频播放器滑块的作用。

我环顾四周，没有找到任何纯 JS 解决方案，只有 JQUERY，我无法使用。有什么建议吗？

【问题讨论】：

你有没有试过制作一个函数，当它到达某个点时颜色会改变？即滑块25%为黄色，50%为红色，以此类推
我特别希望滑块的左侧为红色，右侧为灰色（例如）。
您需要隐藏输入，并有一个看起来像滑块的 div 来修改实际滑块值
这就是我所担心的。谢谢！
其实我错了。看我的回答。

标签： javascript html css rangeslider

【解决方案1】：

根据设计，您也可以使用纯 CSS 实现此目的：

input[type='range'] {
  -webkit-appearance: none;
  background-color: #ddd;
  height: 20px;
  overflow: hidden;
  width: 400px;
}

input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 20px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #333;
  border-radius: 50%;
  box-shadow: -210px 0 0 200px #666;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}

input[type='range']::-moz-range-thumb {
  background: #333;
  border-radius: 50%;
  box-shadow: -1010px 0 0 1000px #666;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}

input[type="range"]::-moz-range-track {
  background-color: #ddd;
}
input[type="range"]::-moz-range-progress {
  background-color: #666;
  height: 20px
}
input[type="range"]::-ms-fill-upper {
  background-color: #ddd;
}
input[type="range"]::-ms-fill-lower {
  background-color: #666;
}

&lt;input type="range"/&gt;

使用这个你必须知道输入width 并且匹配滑块拇指的box-shadow 比width 更多。因为拇指周围的box-shadow 赋予了两侧不同颜色的外观。

此外，由于这在 input 上使用了 overflow: hidden，因此您将无法拥有比轨道更大的拇指。

因此，如果设计更具体，我也可以推荐 noUISlider 它不使用 jQuery

【讨论】：

这更接近我想要的，但问题是我希望拇指在滑块上延伸几个像素。溢出隐藏删除了它，这违背了目的。