Установите блики для ползунка диапазона

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