CODEWITHSUNDEEP
angularangular-material
nimgwfc
nimgwfc

Reputation: 1499

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.

Upvotes: 4

Views: 11749

Answers (1)

nimgwfc
nimgwfc

Reputation: 1499

This is what I needed to make it all red it turns out, in the themes.scss file

.mat-accent .mat-slider-track-fill {
        background-color: red !important;
    }

.mat-slider-thumb-label {
        background-color: red !important;

    }

.mat-slider-thumb {
        background-color: red !important;
    }

Upvotes: 6

Related Questions