Change default background color of md-slider of Angular Material

Question

I am using md-slider of Angular Material version 2.0.0-beta.8

I have selected the indigo-pink theme and imported it in style.css

I am pretty happy with what I have, but I would like to change just the background color of the slider handle and of the thumbnail.

Apparently this is set by the following css code defined in the indigo-pink.css file:

.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill{background-color:#ff4081}

In fact, if I change indigo-pink.css I obtain what I want, but this is clearly not the right way.

So the question which is the right way to change just slider handle and thumbnail color, and for the sake of generality, how to change only some of the attributes of the classes defined in a theme of Angular Material.

Answer 1

With Angular 15 the slider received a full-blown rewrite.

From now on overriding the following variables works:

.mat-mdc-slider {
  --mdc-slider-handle-color: #143864;
  --mdc-slider-focus-handle-color: #143864;
  --mdc-slider-hover-handle-color: #143864;
  --mdc-slider-active-track-color: #143864;
  --mdc-slider-inactive-track-color: #143864;
  --mdc-slider-with-tick-marks-active-container-color: #3861b8;
  --mdc-slider-with-tick-marks-inactive-container-color: #3861b8;
  --mat-mdc-slider-ripple-color: #143864;
  --mat-mdc-slider-hover-ripple-color: #3861b80d;
  --mat-mdc-slider-focus-ripple-color: #3861b833;

  --mdc-slider-label-container-color: #c7cedc;
  --mdc-slider-label-label-text-color: black;
  --mdc-slider-disabled-handle-color: #143864;
  --mdc-slider-disabled-active-track-color: #143864;
  --mdc-slider-disabled-inactive-track-color: #143864;
  --mdc-slider-with-tick-marks-disabled-container-color: #143864;
  --mat-mdc-slider-value-indicator-opacity: 0.9;
}

UPDATE: With Material 18 even more have been added. Here they are:

--mdc-slider-with-overlap-handle-outline-color:#fff;
--mat-slider-ripple-color: #143864;
--mat-slider-hover-state-layer-color: rgba(18, 29, 83, 0.05);
--mat-slider-focus-state-layer-color: rgba(9, 48, 90, 0.2);
--mat-slider-value-indicator-opacity:0.9;

Answer 2

For anyone working with the Angular 14+, the class names in the mat-slider have apparently changed and the accepted answer might need a few tweaks. Here is the updated CSS that can be added to your components CSS file.

::ng-deep .mat-slider.mat-accent .mat-slider-track-fill {
    background-color: #0062AB    ; 
}


::ng-deep .mat-slider.mat-accent .mat-slider-thumb{
    background-color: #0062AB; 
}

::ng-deep .mat-slider.mat-accent .mat-slider-thumb-label {
    background-color: #0062AB; 
}

Answer 3

If you want to override the slider's color one at a time, i.e. to apply custom styles to each slider:

you will need to add classes to your sliders :

       <mat-slider class="average"
        thumbLabel
        [displayWith]="formatLabel"
        tickInterval="1000"
        min="1000"
        max="5000"
        (change)="updateValue($event)"
      ></mat-slider>
      <mat-slider class="min"
        thumbLabel
        [displayWith]="formatLabel"
        tickInterval="1000"
        min="1000"
        max="5000"
        (change)="updateValue($event)"
      ></mat-slider>
      <mat-slider class="max"
        thumbLabel
        [displayWith]="formatLabel"
        tickInterval="1000"
        min="1000"
        max="5000"
        (change)="updateValue($event)"
      ></mat-slider>

Then in your CSS, you can customize each of them as such:

:host ::ng-deep .average .mat-slider-thumb {
  background-color: #ff3967;
}

:host ::ng-deep .min .mat-slider-thumb {
  background-color: blue;
}

:host ::ng-deep .min .mat-slider-thumb-label {
  background-color: blue;
}

:host ::ng-deep .min .mat-slider-track-fill {
  background-color: blue;
}

:host ::ng-deep .max .mat-slider-thumb {
  background-color: orange;
}

:host ::ng-deep .max .mat-slider-thumb-label {
  background-color: orange;
}

:host ::ng-deep .max .mat-slider-track-fill {
  background-color: orange;
}

All info about :host and ::ng-deep in the offical Angular documentation for component styles

Answer 4

Using color="primary" is just to set it to one of it's default themes. Only way to change the background-color as of now is,

/deep/.mat-accent .mat-slider-thumb, 
/deep/.mat-accent .mat-slider-thumb-label,
/deep/.mat-accent .mat-slider-track-fill {
    background-color: #128CB0;
}

Does anyone here know how to change the color of the text in the thumb-label though? Adding color: #fffff within the same css does not seem to help, it's still using black as the color.

Answer 5

Change Slider color by setting color

<mat-slide-toggle color="primary" [(ngModel)]="wifiStatus">Wifi</mat-slide-toggle>

Answer 6

Here is how I solved in just a few minutes and got it working.
Add this two-line in style.css, not in component CSS.

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color:#0056ff;//Your color
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: #0056ff;//Your color
}

Answer 7

Angular material components are using themes https://material.angular.io/guide/theming

Slider's background colors can be changed this way:

@include mat-slider-theme(map_merge(mat-light-theme, (
    accent: mat-palette(map_merge($mat-deep-orange, (
        500: green,
    ))),
    foreground: (
        base: #848484,
        slider-min: white,
        slider-off: #bebebe,
        slider-off-active: #bebebe,
    ),
)));

Answer 8

::ng-deep is the way to override theme classes, as stated by Nehal.

It seems though that it does not work if you concatenate more classes. In other words the following code does NOT work

::ng-deep .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill {
    background-color: black;
}

while the following version of the code actually works and overrides effectively the values set in the theme css

::ng-deep .mat-accent .mat-slider-thumb {
    background-color: black;
} 
::ng-deep .mat-accent .mat-slider-thumb-label {
    background-color: black;
} 
::ng-deep .mat-accent .mat-slider-track-fill {
    background-color: black;
} 

Answer 9

You can use ::ng-deep override any css class from the prebuilt stylesheet.

To apply the custom change for whole app, add the custom class to root component's stylesheet, usually styles.css.

css to customize md-slide-toggle:

/* CSS to change Default/'Accent' color */

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: blue; /*replace with your color*/
}

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: skyblue;  /*replace with your color*/
}

/* CSS to change 'Primary' color */

::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: green;
}

::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #ff99ff;
}

/* CSS to change 'Warn' color */

::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: red;
}

::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #ffe066;
}

Plunker example