Set highlights to range slider

Question

I use bootstrap 4 and angular 8. I want to make something like this:

This is a range slider with highlighted sectors. I would like to have a red highlighted sector at the beginning and one at the end to show that someone chooses a value that is going to be critical. This picture is from an example at https://seiyria.com/bootstrap-slider/ shown in example 22. But there is the known issue that this would not work on Bootstrap 4 - I tried but it doesn't. I tried with CSS but the value for the red sector is variable so it doesn't work. Someone can help?

Answer 1

try in your 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;
}