css Question posted in
Some basic documentation can be found here.

Css – 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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search