Styling input["range"] in Bootstrap 5 and Angular

Question

I am trying to re-color the thumb slider for a Bootstrap 5 range control, but I can't seem to find the magic combination.

Here is a stackblitz: https://stackblitz.com/edit/stackblitz-starters-3vywax?file=src%2Fmain.ts

The BS5 docs provide sass variable, but I can't eem to get the code to pickup my overrides.

Answer 1

Derived from sol answer. You can wrap this on a class and style the slider.

We can style the thumb using ::-webkit-slider-thumb, where we use the bootstrap variable --bs-warning.

SCSS:

.custom-slider {
  /* Add application styles & imports to this file! */
  input[type='range'] {
    -webkit-appearance: none;
  }
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--bs-warning);
    height: 20px;
    width: 20px;
    margin-top: -8px;
  }
}

HTML:

<div class="col-12 text-center custom-slider">
    <label for="zoomSlider" class="form-label">Zoom</label>
    <input
      type="range"
      class="form-range"
      min="0.75"
      max="1.25"
      step="0.25"
      id="zoomSlider"
      name="zoomSlider"
      (input)="changeZoom($event)"
      [value]="z"
    />
  </div>
</div>

Stackblitz Demo

Answer 2

You can override the $primary SCSS variable which is used on the slider thumb:

$primary: #00ff00;

@import 'bootstrap/scss/bootstrap';

Updated StackBlitz

If you need the slider color to be a different color than the primary color, see the other answer.