Change the color of mat-slider

user_11901834 0
Viewed 3766

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.

angular-material angular
2 Answers

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

It is easier to simply style the container element itself through the use of the scrollbar pseudo classes.

For example, to style the scrollbar track for the entire site you could do:

::-webkit-scrollbar-track {
  background-color: #a_valid_color;
}

And to style the scrollbar thumb for the entire site:

::-webkit-scrollbar-thumb {
  background-color: #a_valid_color;
}

more information here

user_130520920
Related