How to Change Color Property of Mat-Slide-Toggle/ Overwrite CSS of Component

Is there any way to change disable state color of mat-slide-toggle

In the root style.scss do a global style override (Not recommended normally) as follows. After you import the material theme

Ref: https://material.angular.io/guide/customizing-component-styles

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

....
....


.mat-slide-toggle-bar {
  background-color: #e47171 !important;
}

Image Ref of style import

How to change color of mat-slide-toggle via html (Angular)

For changing the color of the sliders dynamically, you can create a Directive that receives the color for the circle and the one for the slider as inputs. The directive add attributes on the element and adds the styling needed to change the colors:

There is a similar answer given for changing the color for a progress bar here: Change angular material progress bar color from code.

The directive you need looks like this:

@Directive({
  selector: '[sliderColor]'
})
export class SliderColorDirective implements OnChanges {
  static sliderNumberCounter = 0;

  @Input() circleColor: number;
  @Input() sliderColor: number;
  styleElement: HTMLStyleElement = document.createElement('style');

  attributeName: string;

  constructor(private el: ElementRef) {
    this.attributeName = `slider-color-${SliderColorDirective.sliderNumberCounter}`;
    SliderColorDirective.sliderNumberCounter++;
    const nativeEl: HTMLElement = this.el.nativeElement;
    nativeEl.setAttribute(this.attributeName, '');
    nativeEl.appendChild(this.styleElement);
  }

  ngOnChanges(): void {
    this.setColors();
  }

  setColors(): void {
    this.styleElement.innerText = `
      [${this.attributeName}] .mat-slide-toggle-bar {
        background-color: ${this.sliderColor};
      }
      [${this.attributeName}] .mat-slide-toggle-thumb {
        background-color: ${this.circleColor};
      }
    `;
  }
}

The directive can be used like this:

<mat-slide-toggle sliderColor [sliderColor]="'red'" [circleColor]="'black'">{{data.label}}</mat-slide-toggle>

Angular material mat-slide-toggle change toggle icon

You could overwrite the default styling that is being applied to the Material slide toggle component. I must warn you, this is a bit hacky to do so. However, here's my take on your screenshot.

Styling that is needed for this:

.mat-slide-toggle-thumb {
    width: 10px !important;
    height: 10px !important;
    transform: translate(50%, 50%);
}

.mat-slide-toggle-bar {
  background-color: #000;
  border-radius: 15px !important;
  height: 16px !important;
}

.mat-slide-toggle-thumb-container {
  top: -2px !important;
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: #000;
}

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

Unfortunately, some !important is needed to overrule the default styling that is set by Angular's Material CSS. You can view the example on StackBlitz.

Change default background color of md-slider of Angular Material

You can use ::ng-deep override any css class from the prebuilt stylesheet.

To apply the custom change for whole app, add the custom class to root component's stylesheet, usually styles.css.

css to customize md-slide-toggle:

/* CSS to change Default/'Accent' color */

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: blue; /*replace with your color*/
}

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: skyblue;  /*replace with your color*/
}

/* CSS to change 'Primary' color */

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

::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #ff99ff;
}

/* CSS to change 'Warn' color */

::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: red;
}

::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #ffe066;
}

Plunker example

mat-slide-toggle : maintain color depth even disabled

You can override Material style in your CSS turning off opacity like this :

.mat-slide-toggle.mat-disabled {
   opacity: 1 !important;
}

Size Angular Material Slide Toggle (small, medium, large)

It happens that because you're styling wrapper of this component. You need to style specific classes of that component which are .mat-slide-toggler-bar and .mat-slide-toggle-thumb with ::ng-deep selector if your styles is encapsulated. Here is an example which will get you started to playing with increasing size of toggler:

::ng-deep .mat-slide-toggle-bar {
  height: 7px;
  width: 28px;
}

::ng-deep .mat-slide-toggle-thumb {
  height: 10px;
  width: 10px;
}

::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(18px,0,0) !important;
}

::ng-deep .mat-slide-toggle-thumb-container {
    width: 12px;
    height: 12px;
    top: -2px;
}

---

Related Topics