Question

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

我四处逛逛，没有找到纯JS解决方案的任何东西，只有JQUERY，我无法使用。有什么建议吗？

Answer 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使得两侧的颜色都不同。

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

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

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

1 个答案: