Осталось научить ползунки, которые мы сделали с помощью псевдоэлемента label::after, переключаться.

Для управления активным состоянием ползунка используем CSS-правило с таким селектором:

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

В активном состоянии мы будем смещать ползунок с помощью трансформации translateX, а также менять его цвет.

Свойства плавного перехода, как и в предыдущих примерах, добавим в CSS-правило для исходного состояния ползунка:

label::after { ... }

В этом случае он будет плавно перемещаться в обоих направлениях.