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

Answer 1

::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 2

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 3

Change Slider color by setting color

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

Answer 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 on the offical Angular documentation for component styles

Answer 5

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