自定义滑块设计问题

Question

我想设置一个自定义HTML滑块<input type="range">的样式，该滑块具有一些彩色的端点，如下所示：

目前，我可以通过以下方式获得图片中显示的结果：

input[type="range"] {
  &:before{
    content:'';
    position:absolute;
    background-color:red;
    // width, height, positioning, ...
  }
  &:after{
    content:'';
    position:absolute;
    background-color:green;
    ...
  }

将手柄移到范围的开头或结尾会产生以下结果：

尝试更改z-index我只能在滑块的前面或后面完全绘制着色点。

我还尝试为浏览器特定的类（如::-webkit-slider-runnable-track, ::-webkit-slider-thumb等提供不同的z-index值，但这也无济于事。

是否可以在滑块导轨和手柄之间绘制彩色点，以使该点位于导轨的顶部，但手柄覆盖该点？

Answer 1

input[type="range"]:before{
  content:'';
  z-index: 5;
  position:absolute;
  width: 10px;
  height: 10px;
  top: 10px;
  left:-10px;
  background-color:red;
}
input[type="range"]:after{
  content:'';
  z-index: -1;
  position:absolute;
  width: 10px;
  height: 10px;
  right: -10px;
  top: 10px;
  background-color:green;
}

您不能将:before和:after元素放在父元素的后面。因此，也许如果您将:before/:after元素放在带有left:-10px;和right: -10px;的范围条之前和之后，您的问题将得到解决吗？