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