HTML slider 颜色和标记

Question

我想创建一个具有多种颜色和点标记的 slider 。
这是我想要实现的示例:

我发现使用 ms-fill-lower 和 ms-fill-upper 可以修改指针之前和之后的轨道部分，但我希望特定数字的范围具有不同的颜色，我想显示它们之间的边框数字，是否可以通过 CSS 或者我可以将背景图像添加到 ms-track 以实现此目的，因为这对我不起作用:

.slider::-ms-track {
  background-image: url("assets/track.png");
}

Answer 1

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#116b17+0,116b17+33,f7ec27+33,f7ec27+66,ff2828+66,ff2828+100 */
background: #116b17; /* Old browsers */
background: -moz-linear-gradient(left,  #116b17 0%, #116b17 33%, #f7ec27 33%, #f7ec27 66%, #ff2828 66%, #ff2828 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #116b17 0%,#116b17 33%,#f7ec27 33%,#f7ec27 66%,#ff2828 66%,#ff2828 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #116b17 0%,#116b17 33%,#f7ec27 33%,#f7ec27 66%,#ff2828 66%,#ff2828 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#116b17', endColorstr='#ff2828',GradientType=1 ); /* IE6-9 */

  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0px 0px 5px 2px #ccc;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.marking {
  list-style: none;
  display: flex;
  padding: 0;
}

.marking li {
  flex: 1;
  text-align: right;
}

<div class='wrapper'>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <ul class='marking'>
    <li>20</li>
    <li>40</li>
    <li>60</li>
    <li>80</li>
    <li>100</li>
  </ul>
</div>

我希望你正在努力实现这样的目标。
编辑
我已经添加了向 slider 添加标记的方法。