Angular Material 2 mat-slide-toggle change slide distance of thumb

Question

I'm using the mat-slide-toggle element from Angular Material 2, and I made it a bit bigger, but the thumb doesn't move to the end of the container when clicked, and I can't seem to figure out which transform-translate property controls the distance.

The following is a pic of how it looks currently when clicked:

Is someone aware of what property needs to be changed for this to slide to the end? Thanks in advance.

score 2 · Accepted Answer · answered Nov 10 '18 at 02:29

In case someone Googles this - the correct selector is the following:

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

I got the correct answer from the following link, which contains other useful selectors for mat-slide-toggle.

Angular Material 2 mat-slide-toggle change slide distance of thumb

1 Answers1