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.

Solution 1

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

Solution 2

::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;
} 

Solution 3

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,
    ),
)));

Solution 4

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

Solution 5

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
}

View more solutions