Нестандартный дизайн слайдера

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, я могу рисовать только цветные точки перед ползунком или позади него.

Я также пытался задать разные значения z-index для классов, специфичных для браузера (например, ::-webkit-slider-runnable-track, ::-webkit-slider-thumb, ...), но это тоже не помогло.

Возможно лизакрасить цветные точки "между" направляющей ползуна и ручкой так, чтобы точка находилась сверху направляющей, но ручка закрывала точку?

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;, ваша проблема будет решена?