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

我想用范围输入滑块调整

不透明度的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> 


我需要添加什么javascript才能实现这一点？我希望滑块影响正方形的不透明度。
首先，您需要修改CSS。在
#contractFilter
上的
z-index
将使其呈现在输入之上，使其不可读取

其次，您需要向输入的更改事件添加一个侦听器，获取值，并更新
#contrastFilter
的不透明度CSS。我建议使用以促进跨浏览器遵从性

CSS:

JavaScript（使用jQuery）：

分叉小提琴：
您只需使用事件：



$（'#对比度'）。在（'input'，function（）上{
$（'#ContractFilter'）.css（'opacity'，$（this.val（））；
});
对比度过滤器{
背景色：黑色；
宽度：200px；
高度：200px；
位置：绝对位置；
最高：20%；
浮动：对；
左：20%；
z指数：2；
不透明度：0.2；
}

请在此处或上方添加工作代码片段。@SergeyDenisov已添加it@ScottMyers我很乐意帮忙！
#contrastFilter{
  background-color:black;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0.2;
}

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

#contrastSlider {
  position: absolute;
}

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

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