javascript - 使用范围 slider 设置不透明度

Question

我想用范围输入 slider 调整 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 才能使这项工作正常进行？我希望 slider 影响正方形的不透明度。

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>