Регулировка прозрачности класса ползунком range?

Question

[1klass001]

Здравствуйте. Как я могу регулировать прозрачность дива через type="range" без отправки данных на сервер или перезагрузки страницы?

.div {
background: red;
width: 100px;
height: 100px;
filter: opacity(50%);
}

<input type="range" min="0" max="100" step="10">

Comments

[Алекс Глебов]

Через css переменные передавай значение ползунка в div

Answer 1

[Александр Шемаханов]

Все очень просто, берешь свой блок, берешь ползунок.
На ползунок вешаешь обработчик события, либо input, либо change (смотря какой эффект нужен), далее берешь текущее значение с ползунка и присваиваешь нужный стиль блоку.

Comments

[1klass001]

Вау, спасибо огромное. то что нужно.

[1klass001]

А если еще один фильтр применить ?

filter: blur(3px);

Дублировать с новым именем стиля не получилось.

Answer 2

[altkov]

https://developer.mozilla.org/ru/docs/Learn/JavaSc...
https://learn.javascript.ru/styles-and-classes

Answer 3

[1klass001]

const div = document.querySelector('.div');
let range = document.querySelector('#range');

range.addEventListener("input", function(e) {
div.style.filter = `opacity(${e.target.value}%)`
});

Это решение мне помогло. Подскажите еще пожалуйста если нужно применить уже другой фильтр
filter: blur(3px);

Но уже к div2.

Пробовал дублировать JS код с новыми значениями, вместе отказываются работать

Comments

[Александр Шемаханов]

Стивен нужно применять фильтр к разным блокам одновременно от одного и того же ползунка? Тогда так:

const div1 = document.querySelector('.div1'),
div2 = document.querySelector('.div2'),
range = document.querySelector('#range');

range.addEventListener("input", function(e) {
div1.style.filter = `opacity(${e.target.value}%)`;
div2.style.filter = `blur(${e.target.value / 10}px)`;
});

[1klass001]

Александр Шемаханов, прошу прощения за свою датошность))

ползунки на прозрачность и блюр разные.
"range" если меняю на другой тип допустим 'text' то работает. Нужно второй ползунок идентифицировать как-то)

[Александр Шемаханов]

Стивен, например можно вот так:

[1klass001]

Александр Шемаханов, вы лучший)