CODEWITHSUNDEEP
angularmaterial-designslidetoggleangular-material2
j809809jkdljfja
j809809jkdljfja

Reputation: 807

How to set color of an "unchecked" slide-toggle component?

Can I set color of an "unchecked" slide-toggle component? The documentations specifies how to set the "checked" one only.

In slide-toggle-configurable-example.html template:

<md-slide-toggle
      class="example-margin"
      [color]="color">
    Slide me!
</md-slide-toggle>

And in *.ts file:

import {Component} from '@angular/core';

@Component({
  selector: 'slide-toggle-configurable-example',
  templateUrl: 'slide-toggle-configurable-example.html',
  styleUrls: ['slide-toggle-configurable-example.css'],
})
export class SlideToggleConfigurableExample {
  color = 'accent';
  checked = false;
}

I woul really like to have some specific color whent slide-toggle is "unchecked". Is it possible?

Upvotes: 0

Views: 8208

Answers (2)

Vikki
Vikki

Reputation: 31

To set the color of mat-slide-toggle you have to place this code in your style.scss file:

.mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
  background: #F4760B !important;
}

.mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track::after {
  background: #F4760B !important;
}

Upvotes: 0

cyr_x
cyr_x

Reputation: 14267

The only way possibile way to set a color for the unchecked state is to set it via CSS using the following rule:

For the toggle-bar use: 

md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: red; /* set your color here */
}

You could also set different colors based on the type:

md-slide-toggle.mat-primary:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: pink;
}

md-slide-toggle.mat-accent:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: yellow;
}

To set the color of the thumb use:

md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: green;
}

Upvotes: 2

Related Questions