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

Question

I want to increase the size of a Material Slide Toggle on a page of my Angular 8 project. I have tried setting the size to large, like this:

<mat-slide-toggle size="large" color="primary"></mat-slide-toggle>

However, changing the size from small, medium, and large changes nothing. It remains the same size of the screen. I've also tried adding a style to the component like this:

mat-slide-toggle {
  height: 100px;
  width: 100px;
}

But that doesn't change the the size of the visible component, but it does increase the div the component is in.

How do I change the size of the Material Slide Toggle Component?

Answer 1

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