загрузите 4 диапазона ввода, измените цвет большого пальца

Question

Есть какие-нибудь идеи, как настроить цвета диапазонов начальной загрузки 4 и изменить синий цвет большого пальца на «серый»?

Введите html ниже.

<p id="slider" class="range-field">
  <input 
    type: "range",
    min:"0" max:"3"
    class: "custom-range"
    value: "2"
    disabled: "true"
  />
</p>

Answer 1

Попробуйте следующий код - различные классы, относящиеся к поставщику, используйте в зависимости от ваших потребностей:

.custom-range::-webkit-slider-thumb {
  background: gray;
}

.custom-range::-moz-range-thumb {
  background: gray;
}

.custom-range::-ms-thumb {
  background: gray;
}

Answer 2

Если вы используете Sass , вам нужно изменить (перезаписать) значение переменной $custom-control-indicator-checked-bg на _variables.scss .

Значение по умолчанию $custom-control-indicator-checked-bg:

$component-active-bg: theme-color("primary") !default;
// ...
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;