Установить непрозрачность с помощью ползунка диапазона

Question

Я хотел бы отрегулировать атрибут css opacity с ползунком ввода диапазона. Если у меня есть:

<div id="contrastFilter">&nbsp;</div> 

<div id="contrastSlider"> 
    <input id="contrast" type="range" value="contrast" max="0.5" min="0" step="0.01"></input> 
</div> 

, и я хотел бы изменить непрозрачность этого:

#contrastFilter{ 
    background-color:black; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
    opacity: 0.2; 
} 

JSFiddle

Что Javascript бы я должен добавить, чтобы сделать эту работу? Я бы хотел, чтобы ползунок влиял на непрозрачность квадрата.

Answer 1

Вы могли бы просто использовать input событие:

JSFiddle

$('#contrast').on('input', function() { 
 
    $('#contrastFilter').css('opacity', $(this).val()); 
 
});

#contrastFilter { 
 
    background-color: black; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    top: 20%; 
 
    float: right; 
 
    left: 20%; 
 
    z-index: 2; 
 
    opacity: 0.2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<div id="contrastFilter"></div> 
 
<div id="contrastSlider"> 
 
    <input id="contrast" type="range" value="contrast" max="0.5" min="0" step="0.01"/> 
 
</div>

Answer 2

Во-первых, вам нужно будет пересмотреть свой CSS. То, что z-index на #contrastFilter будет отображать его выше вашего ввода, делая его незаметным.

Во-вторых, вам нужно добавить слушателя к событию изменения ввода, получить значение и обновить CSS-код непрозрачности #contrastFilter. Я рекомендую использовать jQuery для обеспечения соответствия между браузерами.

CSS:

#contrastFilter{ 
    background-color:black; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0.2; 
} 

#contrastSlider { 
    position: absolute; 
} 

JavaScript (с помощью JQuery):

$(document).ready(function() { 
    $('#contrastSlider').change(function(e) { 
    var value = $(e.target).val(); 

    $('#contrastFilter').css('opacity', value); 
    }); 
}); 

Forked скрипку: http://jsfiddle.net/Lmyoz94j/