Change the color of mat-slider

I'm currently learning angular and I have come across an issue that I'm sure is very easily solved but I have been unable to fins an answer to.

I have the following code in my project:

<mat-slider step="10" [value]="80" thumbLabel (change)="updateValue($event)" class="selector"></mat-slider>


At the minute, the selector line and thumb appears as yellow which seems to be the default color.

Can anyone advise what I need to do to change the color of the slider and thumb?

I have tried the following in the scss file and can't get any changes to come through:

.mat-slider-thumb {
border-color: red;
background-color: blue;
}

.mat-slider {
border-color: red;
background-color: green;
}


The only thing that works in the above is the background color change to green which changes the full element background color.

Continue reading...