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

Posted 2023-02-18

【中文标题】如何使范围滑块的左侧与滑块右侧的颜色不同？

【英文标题】：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 来修改实际滑块值

这就是我所担心的。谢谢！

其实我错了。看我的回答。

【参考方案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;

<input type="range"/>

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

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

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

【讨论】：

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