Как сделать ползунок с filter: brightness()?

Question

[Иван Вагнер]

Хочу реализовать понижение яркости на странице за счёт css свойства filter: brightness(), нашёл пример с ползунком, но к сожалению, не знаю как вытащить код ползунка. Вот пример: ТЫК.

Answer 1

[0xD34F]

<input type="range" min="20" max="200" value="100">
<img src="...">

document.querySelector('input').addEventListener('input', function() {
  document.querySelector('img').style.filter = `brightness(${this.value}%)`;
});

https://codepen.io/anon/pen/ZNgoBL?editors=1010

Comments

[Иван Вагнер]

Огромное спасибо!

[Иван Вагнер]

А ещё вопросик, как применить QuerySelector для css body?

[0xD34F]

Иван Вагнер, querySelector не нужен: document.body.style.filter = ....

[Иван Вагнер]

0xD34F, щас буду разбираться.. просто мне нужно чтобы этот ползунок менял значение стиля html, body {}

[Иван Вагнер]

0xD34F, чего-то не особо получается.

[0xD34F]

Иван Вагнер, запомните раз и навсегда: "не получается" - это разговор ни о чём. Вы сейчас ничего не сказали. Никто не будет пытаться угадать, где и как вы накосячили. Своё "не получается" следует показывать.

[Иван Вагнер]

0xD34F, извините, я просто сначала попробовал, потом написал, потом снова попробовал. Я попытался перенести стиль

html, body {
    position: absolute;
    background-color: #ffffff!important;
    color: #000;
    font-family: Verdana, sans-serif;
    font-weight: normal;
    font-size: 12px!important;
    line-height: 1.1;
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    margin: 0;
    min-width: 1000px;
    min-height: 600px;
}

с css в php файл где и находится сам скрипт с ползунком.

document.querySelector('input').addEventListener('input', function() {
  document.body.style.filter = `brightness(${this.value}%)`;
});

[Иван Вагнер]

0xD34F, пытался погуглить, но пока ничего не нашёл.

[0xD34F]

Иван Вагнер, если вы думаете, что стало сильно яснее - нет, не стало.

[Иван Вагнер]

0xD34F, не суть, я не умею объяснять. Спасибо за помощь

[Rustam Bainazarov]

Иван Вагнер, тег html на position: absolute?

Чего ради? :))

[Иван Вагнер]

Рустам Байназаров, такого говна полно. До меня ещё администратор был в проекте.