В данной статье я бы хотел поделиться мыслями об одном из способов создания компонента переключателя. Демонстрация.

Если вы предпочитаете видео, можете ознакомиться с данной темой на YouTube

Обзор

Элемент переключателя toggle работает подобно чекбоксу, но более явно отражает выбор только между двумя состояниями: "включено" и "выключено".

При создании данного компонента используется <input type="checkbox" role="switch">, благодаря чему он становится полностью функциональным и доступным без использования дополнительного CSS или JavaScript. Использование CSS добавляет поддержку языков, использующих написание справа налево, вертикального положения, анимации и другого. А благодаря JavaScript позволяет переключаться с помощью перетаскивания.

Кастомные свойства

В следующих переменных задаются указывается параметры различных частей переключателя.