JSFiddle - React, Tailwind, and code Playground

by Sergey Denisov

HTML

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

CSS

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

JavaScript

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