Toggle switches, step 4

All that we have left to do is to teach the sliders, which we created using the label::after pseudo-element, to toggle back and forth.

In order to control the active state of the slider, we will use a CSS rule with this selector:

input[type="checkbox"]:checked ~ label::after { ... }

When it is active, we will move the slider using the translateX transform and also change its color.

The smooth transition properties, just like in the previous examples, will be added to the CSS rule for the initial state of the slider:

label::after { ... }

In this case, it will move smoothly in both directions.