将高光设置为范围滑块

Question

我使用 bootstrap 4 和 angular 8。 我想做这样的事情：

这是一个带有突出显示扇区的范围滑块。我想在开头和结尾有一个红色突出显示的扇区，以表明有人选择了一个至关重要的值。 这张图片来自https://seiyria.com/bootstrap-slider/的一个例子 如示例 22 所示。但有一个已知问题是这在 Bootstrap 4 上不起作用 - 我试过但没有。 我尝试使用 CSS，但红色扇区的值是可变的，因此它不起作用。有人可以帮忙吗？

Answer 1

试试你的css：

input[type="range"]{
    background-color: transparent;
}
  

  input[type="range"]::-webkit-slider-runnable-track {
    /* -webkit-appearance: slider-horizontal; */
    background-image: linear-gradient(90deg, #e5405e 0%, #e5405e 20%, #ffdb3a 20%, #ffdb3a 40%, #3fffa2 40%, #3fffa2 60%,#ffdb3a 60%, #ffdb3a 80%,  #e5405e 80%, #e5405e 100%);
    cursor: default;
    padding: initial;
    border: initial;
}