CODEWITHSUNDEEP
angular6angular-material-6
Chamila
Chamila

Reputation: 23

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

Upvotes: 1

Views: 5873

Answers (1)

Smiter
Smiter

Reputation: 1206

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.

enter image description here

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

Upvotes: 2

Related Questions