Изменить цвет мат-слайдера

Question

В настоящее время я изучаю angular, и я столкнулся с проблемой, которую, я уверен, очень легко решить, но я не смог найти ответ.

У меня есть следующий код в мой проект:

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

В данный момент линия селектора и большой палец отображаются желтым цветом, который кажется цветом по умолчанию.

Может кто-нибудь посоветовать, что мне нужно сделать, чтобы изменить цвет ползунка и большого пальца?

Я попробовал следующее в файле s css и не могу получить никаких изменений:

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

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

Единственное, что работает в Выше приведено изменение цвета фона на зеленый, что меняет цвет фона всего элемента.

Answer 1

Это то, что мне нужно, чтобы все было красным, оказывается, в темах.s css 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;
    }