引导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 ，则必须从_variables.scss更改（覆盖）变量$custom-control-indicator-checked-bg的值。

$custom-control-indicator-checked-bg的默认值为：

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