Change default background color of md-slider of Angular Material

user_5699993 0
Viewed 30511

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.

angular-material2
7 Answers

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

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

Custom sliders

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

user_85790550

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

Change Slider color by setting color

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

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.

user_129884860
Related