How can I change the Bootstrap 4 range slider colors?

Question

Is there any ideas how to customize bootstrap 4 ranges colors and change blue thumb color to 'gray'?

Input html below.

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

Answer 1

Try the following code - various vendor-specific classes, use depending on your requirement needs:

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

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

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

Per comments by Astariul and aliawadh980, change the shadow that occurs when the thumb is clicked like this:

-webkit-slider-thumb:active {
    background-color: red;
}
-webkit-slider-thumb,
.custom-range:focus::-webkit-slider-thumb, 
.custom-range:focus::-moz-range-thumb,
.custom-range:focus::-ms-thumb {
    box-shadow: red;
}

Answer 2

If you are using Sass you have to change (overwrite) value of $custom-control-indicator-checked-bg variable from _variables.scss.

Default value of $custom-control-indicator-checked-bg is:

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