将高光设置为范围滑块

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;
}

将高光设置为范围滑块

Set highlights to range slider

highlight

rangeslider

bootstrap-4

angular