如何使范围滑块的左侧与滑块的右侧具有不同的颜色？
如何使范围滑块的左侧与滑块的右侧具有不同的颜色？
提问于 2018-12-12 03:13:09
查找有关如何根据滑块所在的可拖动部分的哪一侧更改滑块颜色的信息，例如HTML5视频播放器滑块的工作方式。
我四处寻找了一下，没有发现任何纯JS解决方案，只有JQUERY，我不能使用它。有什么建议吗？
回答 1
Stack Overflow用户
发布于 2018-12-12 05:25:35
根据设计的不同，你也可以用纯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，您将无法拥有比track更大的拇指。
因此，如果设计更具体，我也可以推荐不使用jQuery的noUISlider
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53730877
复制相关文章
相似问题