使用范围滑块设置不透明度

Question

我想使用范围输入滑块调整opacity的css属性。 如果我有：

<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

您可以简单地使用输入事件：

的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。 #contrastFilter上的z-index #contrastFilter其呈现在您的输入上方，使其#contrastFilter点击。

其次，您需要为输入的change事件添加一个侦听器，获取值，并更新#contrastFilter的不透明CSS。 我建议使用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);
  });
});

分叉的小提琴： http : //jsfiddle.net/Lmyoz94j/