How to style the angular2 material slide-toggle button
Solution 1
I've found you can use /deep/ in the css but you also have to target the specific classes.
/deep/ .mat-slide-toggle-bar {
height: 7px !important;
}
/deep/ .mat-slide-toggle-thumb {
height: 10px !important;
width: 10px !important;
}
Something else to keep in mind is viewEncapsulation because deep allows you to break this convention since the styles are set in such a way with Angular that they are applied inline.
Related stack post: How to overwrite angular 2 material styles?
Related Angular Documentation: https://angular.io/guide/component-styles#!#-deep-
Solution 2
@tallgeese117 's answer is really very helpful. I would like to add few more lines of code to the their answer so that it will display the toggle in the required size and look:
/deep/ .mat-slide-toggle-bar {
height: 7px !important;
width: 28px !important;
}
/deep/ .mat-slide-toggle-thumb {
height: 10px !important;
width: 10px !important;
}
/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
transform: translate3d(18px,0,0) !important;
}
/deep/ .mat-slide-toggle-thumb-container {
width: 12px !important;
height: 12px !important;
top: -2px !important;
}
Solution 3
I used the solution provided by @tallgeese117 above. But in VScode, the CSS file was showing in red (\deep\
), which was annoying. I couldn't find a way to ignore this css lint check. Thus I tried an alternative (altering css dynamically). I am pasting it below for others:
ngOnInit() {
let eleArray = document.getElementsByClassName('mat-slide-toggle-content');
for(let i = 0 ; i < eleArray.length; i++) {
// @ts-ignore
eleArray[i].style.cssText = 'font-size:6vw;';
}
}
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Admin
Updated on June 27, 2022Comments
-
Admin about 2 years
I am new to angular 2 and material design. I would like to know how to style the slide-toggle button to be smaller.
<div class="example-section"> <mat-slide-toggle class="line-toggle" <span class="font-size-12">Slide Me</span> </mat-slide-toggle> </div>
The css is as below
.example-section { display: flex; align-content: center; align-items: center; height: 18px; margin-top: -12px; } .line-toggle{ height: 10px; line-height: 8px; }
I would like to decrease the size of the button and reduce the height of the slider.