@1klass001

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

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

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


<input type="range" min="0" max="100" step="10">
  • Вопрос задан
  • 189 просмотров
Решения вопроса 1
sh3mahan
@sh3mahan
что-то вроде веб-разработчика
Все очень просто, берешь свой блок, берешь ползунок.
На ползунок вешаешь обработчик события, либо input, либо change (смотря какой эффект нужен), далее берешь текущее значение с ползунка и присваиваешь нужный стиль блоку.

Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@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 код с новыми значениями, вместе отказываются работать
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы