Сегодня хотелось бы разобрать стили и функциональность для элементов формы и ползунка яркости.
https://codepen.io/jkantner/pen/mdEPpxq
Давайте разберем код по шагам и рассмотрим его более подробно:
Шаг 1: Определение стилей и переменных
Шаг 2: Добавление обработчика события DOMContentLoaded
Шаг 3: Определение функции adjustSlider
В этой функции происходит обновление цветовых значений для элементов формы и ползунка яркости, основываясь на текущем значении ползунка.
- body - ссылка на элемент <body>.
- switchLightMin и switchLightMax - минимальное и максимальное значения яркости для изменения цвета элементов формы.
- tar - целевой элемент, на который было произведено событие.
- pct - процентное значение текущего значения ползунка.
- L1, L2 и L3 - значения яркости для элементов формы, рассчитанные на основе текущего значения ползунка.
- L - массив, содержащий значения яркости.
- thumbHueMin и thumbHueMax - минимальное и максимальное значения оттенка для ползунка яркости.
- thumbHue - значение оттенка, рассчитанное на основе текущего значения ползунка.
- thumbSat и thumbLight - значения насыщенности и яркости для ползунка яркости.
- thumbHSL - строка, представляющая значения оттенка, насыщенности и яркости для ползунка яркости.
- Обновление цветовых переменных для элементов формы и ползунка на основе вычисленных значений яркости и оттенка.
Таким образом, функция adjustSlider обновляет цвета элементов формы и ползунка, чтобы отображать текущее значение яркости.
Если у вас возникнут вопросы не стесняйтесь писать комментарии!
