angular material 6 multiple mat-sliders with different colors

问题

i have 3 'mat-slider's in a page and i want to have 3 different colors for the sliders. i cant override the theme colors for the page(component) as it will apply to all the sliders. do i have to make 3 different components for the sliders and override theme colors in each? what is the easiest way to achieve this? below are my angular and package versions,

Angular CLI: 6.0.8
Node: 8.9.4
OS: win32 x64
Angular: 6.0.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.3.0
@angular/cli                      6.0.8
@angular/flex-layout              6.0.0-beta.16
@angular/material                 6.3.0
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

回答1:

This may not be the best way but as you ask for the easiest way here is a solution.

Give each slider a class:

// home.component.hmtl
<mat-slider class="mat-slide-1"></mat-slider>
<mat-slider class="mat-slide-2"></mat-slider>
<mat-slider class="mat-slide-3"></mat-slider>

In your styles.scss reference these classes and in each class define the element you wish to change the colour of and make it important:

// styles.scss
.mat-slide-1 {
    .mat-slider-thumb {
        background-color: red !important;
    }
}

.mat-slide-2 {
    .mat-slider-thumb {
        background-color: yellow !important;
    }
}

.mat-slide-3 {
    .mat-slider-thumb {
        background-color: green !important;
    }
}

This example only changes the colour of the thumb but inspect the elements of the slider to find the class relevant to the element you want to change.

A more correct solution would be using multiple themes and applying them separately to each component. Refer the material docs.

来源：https://stackoverflow.com/questions/51038736/angular-material-6-multiple-mat-sliders-with-different-colors

标签

angular6

angular-material-6