0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>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.</p>
1
<p>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.</p>
2
<p>In order to control the active state of the slider, we will use a CSS rule with this selector:</p>
2
<p>In order to control the active state of the slider, we will use a CSS rule with this selector:</p>
3
input[type="checkbox"]:checked ~ label::after { ... }<p>When it is active, we will move the slider using the translateX transform and also change its color.</p>
3
input[type="checkbox"]:checked ~ label::after { ... }<p>When it is active, we will move the slider using the translateX transform and also change its color.</p>
4
<p>The smooth transition properties, just like in the previous examples, will be added to the CSS rule for the initial state of the slider:</p>
4
<p>The smooth transition properties, just like in the previous examples, will be added to the CSS rule for the initial state of the slider:</p>
5
label::after { ... }<p>In this case, it will move smoothly in both directions.</p>
5
label::after { ... }<p>In this case, it will move smoothly in both directions.</p>