Чтобы динамически менять цвет фона с помощью слайдера диапазона в HTML, можно использовать следующий подход: 1

1. В HTML-документе определить слайдер, который меняет цвет фона веб-страницы при перемещении ползунка. 1 Элементу ввода слайдера присвоить идентификатор, например, «myRange». 1 У него должно быть минимальное значение 0, максимальное — 100 и начальное значение 50. 1
2. После получения ввода вызвать функцию «changeBackgroundColor()». 1
3. Функция на JavaScript получает значение слайдера с идентификатором «myRange». 1 Затем строит строку цвета HSL на основе значения слайдера, с полной насыщенностью и 50% светлоты. 1
4. Наконец, устанавливает цвет фона всего тела веб-страницы в сгенерированную цветную строку. 1

Ещё один вариант реализации: 2

1. В HTML-коде определить элемент ввода типа «диапазон» внутри элемента с классом контейнера. 2
2. В CSS изменить внешний вид слайдера с помощью простых свойств CSS. 2
3. В JavaScript прикрепить к слайдеру событие oninput, которое будет запускать функцию на JavaScript при изменении значения слайдера. 2 Это значение читается в реальном времени, и рассчитывается процент двух цветов для линейного градиента CSS. 2
4. Затем с помощью свойства .style на JavaScript и метода setProperty() применить линейный градиент фона к телу HTML-страницы. 2

Отдельное внимание стоит уделить размеру ползунка и градиенту, чтобы цветовые переходы были плавными. 3 Это можно реализовать с помощью CSS-анимаций. 3