Search code examples
cssangularsasssliderbootstrap-5

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

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.

Solution

  • 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