Styling the Angular Material 15 Slider?

Question

For the Angular Material Slider how do we style the track foreground, background, and width of the track and also the thumb fill color and thumb border color and width?

There is an answer here regarding styling the Angular Material Slider, however Angular Material has updated the DOM structure and the CSS classes to conform to the new Material Design Spec, so the styles no longer apply.

Here's a Stackblitz for Angular 15 with an attempt to apply the styles from the SO answer.

score 4 · Answer 1 · answered Mar 02 '23 at 10:05

For most of the stuff, you can just overwrite the css variables.

Apply a class to your slider:

<mat-slider class="my-slider">
  <input matSliderThumb>
</mat-slider>

And overwrite some of the variables used for styling:

.my-slider {
  --mdc-slider-handle-color: red;
  --mdc-slider-active-track-color: green;
  --mdc-slider-inactive-track-color: orange;

  --mdc-slider-inactive-track-height: 12px;

  --mdc-slider-handle-height: 25px;
  --mdc-slider-handle-width: 40px;

  --mdc-slider-inactive-track-shape: 20px;
}

I'm sure they're all listed in docs somewhere, but I didn't bother looking for them. Just inspecting the DOM using developer tools proved to be enough for simple changes.

Regarding the thumb border - by the material guideline, the border is the same color as the fill, so you'll have to do more than changing the css variable. And since thumb is it's own component, you will have to either use style piercing using ::ng-deep or place the styles in the global styles.scss file.

::ng-deep.my-slider .mdc-slider__thumb .mdc-slider__thumb-knob {
  border: 3px solid purple;   
}

Working stackblitz with some random overwrites here.

WOW!! Very cool!! Thanks for pointing all this out!! – Ole Mar 02 '23 at 16:10 — Ole, Mar 02 '23 at 16:10

score 2 · Accepted Answer · answered Mar 02 '23 at 10:43

Those are the CSS selector to directly customize every part of the new Angular Material 15 Slider:

/* Change style of active track */
.mat-primary .mdc-slider__track--active_fill {
    background-color: #00a716;
    border: 0px solid #FFFFFF !important; /* Removes border from active track */
    border-radius: 3px;
}

/* Change style of inactive track */
.mat-primary .mdc-slider__track--inactive {
    background-color: #9c0087 !important;
    border-radius: 3px;
}

/* Change style of progress bar */
.mat-primary .mdc-slider__track--active_fill, .mat-primary .mdc-slider__track--inactive, .mat-primary .mdc-slider__track--active, .mat-primary .mdc-slider__track {
    height: 60px !important;
}

/* Change style of thumb */
.mat-primary .mdc-slider__thumb {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14),
    0 3px 1px rgba(0, 0, 0, 0.12),
    0 1px 5px rgba(0, 0, 0, 0.2);
}

/* Change style of thumb when active */
.mat-primary .mdc-slider__thumb--with-indicator:after {
    background-color: #F44336; /* Change color of thumb indicator */
}

/* Change style of numerical value */
.mat-primary .mdc-slider__value-indicator {
    background-color: #dadd0c;
    color: #FFFFFF;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14),
    0 3px 1px rgba(0, 0, 0, 0.12),
    0 1px 5px rgba(0, 0, 0, 0.2);
}

/* Hide numerical value when thumb is active */
.mat-primary .mdc-slider__thumb--with-indicator.mdc-slider__thumb--focused .mdc-slider__value-indicator {
    opacity: 0;
}

/* Change style of thumb knob */
.mat-primary .mdc-slider__thumb-knob {
    background-color: #F44336;
    border-color: #FFFFFF;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14),
    0 3px 1px rgba(0, 0, 0, 0.12),
    0 1px 5px rgba(0, 0, 0, 0.2);
}

/* Change style of focus indicator */
.mat-primary .mdc-slider__thumb--with-indicator .mdc-slider__thumb-knob:focus {
    outline: none;
}

/* Change style of focus ripple */
.mat-primary .mat-mdc-focus-indicator {
    border-radius: 50%;
    background-color: rgba(244, 67, 54, 0.26);
}

This is the StackBlitz

Styling the Angular Material 15 Slider?

2 Answers2