JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" id="myRange" value="10" max="70" />
<div>
    Drag the slider to change the page overlay opacity.
</div>
<div id="overlay"></div>

CSS

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
#overlay {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

var range = document.getElementById("myRange");
var overlay = document.getElementById("overlay");
range.oninput = function() {
    overlay.style.background = "rgba(0, 0, 0, " + (range.value / 100) + ")";
};
range.oninput();