Чтобы настроить яркость с помощью ползунка в JavaScript, вы можете использовать различные методы в зависимости от ваших требований и предпочитаемых библиотек. Вот несколько подходов:

Метод 1: использование переменных CSS

1. Создайте элемент HTML-ползунка (), который будет служить регулятором яркости.
2. Добавьте прослушиватель событий к ползунку, чтобы обнаруживать изменения его значения.
3. Используйте JavaScript, чтобы обновить переменную CSS значением ползунка.
4. Примените переменную CSS к нужному элементу, используя свойство filterс функцией brightness().

Пример кода:

<input type="range" id="brightnessSlider" min="0" max="100" value="50">
<div id="targetElement">Adjust me!</div>
<style>
  :root {
    --brightness: 1;
  }

  #targetElement {
    filter: brightness(var(--brightness));
  }
</style>
<script>
  const slider = document.getElementById('brightnessSlider');
  const targetElement = document.getElementById('targetElement');

  slider.addEventListener('input', function() {
    const brightnessValue = slider.value / 100;
    targetElement.style.setProperty('--brightness', brightnessValue);
  });
</script>

Метод 2: использование библиотек JavaScript

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

1. Диапазон ввода: https://github.com/voidcosmos/np__input-range
2. noUiSlider: https://refreshless.com/nouislider/
3. Ion.RangeSlider: http://ionden.com/a/plugins/ion.rangeSlider/index.html

Эти библиотеки предлагают больше возможностей настройки и встроенные обработчики событий, которые помогут вам достичь желаемой функциональности.