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?

Stevenson

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

Malefactor

Thank you, unfortunately I wasn't able to fully apply this. I couldn't affect the translatate3d properly to reflect the changes in size. But you gave me a good starting point. If you have any more suggestions here my bitz: stackblitz.com/edit/angular-material-slidetoggle – Stevenson

Can you share code with me so I could try to help you out with it? – Malefactor

Yeah, I have a bitz here, you should be able to edit: stackblitz.com/edit/angular-material-slidetoggle – Stevenson

Okay, so I've found the problem why translate property doesn't apply for you. You need to nest CSS selector .difSized.mat-slide-toggle.-mat.checked because .difSized element has those classes inside, not as child elements. Here is the edited stackblitz for further investigation: stackblitz.com/edit/angular-material-slidetoggle-rjgs2n You'll still need to explore how to fix other styling properties, however, now you can style everything inside toggler. – Malefactor

Oh I see, thanks a bunch, this will work great! I hope material adds a size property in the future to make this way simplier. – Stevenson

Glad I was able to help you out :) And... totally agree with you! Changing such simple things in Material requires a lot of tweaks which are annoying and time confusing. – Malefactor

I know this is a little old, but isn't ::ng-deep being deprecated? angular.io/guide/component-styles#deprecated-deep--and-ng-deep One solution to avoid using ::ng-deep would be to make sure the above code is in a global style file, remove all ::ng-deep, and preface each selector with 'mat-slide-toggle.mat-slide-toggle'. That will override the current mat-slide-toggle style as it is more specific. – Haldes

Answer 2

I think the easiest solution is to simply use scale() on .mat-slide-toggle. This is how I did it and it worked perfectly:

.mat-slide-toggle {
    transform: scale(0.6);
}

This will probably shift the slider to the right. To fix it:

 .mat-slide-toggle {
        transform: scale(0.6) translateX(-10px); //adjust the pixels to your scale size i
 }

Attainable

Answer 3

As mentioned in the selected answer, you need to style the internal classes of mat-slide-toggle (mat-slide-toggle-bar, mat-slide-toggle-thumb, etc). However, /deep/ and ::ng-deep are deprecated, so you shouldn't be using those. One option is to set global styling that is more specific than the default styling on the component. So in a global style file, you could do something like this:

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-bar {
  height: 8px;
  width: 26px;
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-thumb {
  height: 14px;
  width: 14px;
}

//...etc

Combining the component name and class name gives more specificity than the mat-slide-toggle default styling, so it overrides it.

References:

• https://material.angular.io/guide/customizing-component-styles#styling-overlay-components
• https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Haldes

You can use ng-deep now by using encapsulation: ViewEncapsulation.none in the @Component annotation. – Dulcia

Answer 4

just set your favorite size in this code:

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

.mat-slide-toggle-bar {
  width: 42px;
  height: 20px;
  border-radius: 10px;
}

}

Stump