更改墊子滑塊的顏色

Question

我目前正在學習 angular，我遇到了一個我確信很容易解決但我一直無法找到答案的問題。

我的項目中有以下代碼：

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

此時，選擇器線和拇指顯示為黃色，這似乎是默認顏色。

誰能建議我需要做什么來改變 slider 和拇指的顏色？

我在 scss 文件中嘗試了以下內容，但無法進行任何更改：

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

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

上面唯一有效的是背景顏色變為綠色，這改變了整個元素的背景顏色。

Answer 1

這就是我在 themes.scss 文件中讓它全部變成紅色所需要的

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

Answer 2

通過使用滾動條偽類來簡單地設置容器元素本身的樣式會更容易。

例如，要為整個站點設置滾動條軌道的樣式，您可以這樣做：

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

並為整個站點設置滾動條縮略圖的樣式：

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

更多信息在這里