JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<div id="container">
    <div id="brightness"></div>
    <img src="http://placehold.it/400x400" />
</div>

Brightness (0 - 100):<br />
<input type="range" id="controls" value="50" min="0" max="100" maxlength="3">

CSS

#container{
    width:400px;
    height:400px;
    margin-bottom:10px;
    border:1px solid rgb(127, 127, 127);
}

#brightness{
    width:400px;
    height:400px;
    background:white;
    position:absolute;
    opacity:0;
}

#controls{
    width:400px;
    height:22px;
    padding:0 5px;
}

JavaScript

var brightness = document.getElementById('brightness');
    controls   = document.getElementById('controls');

controls.onkeyup = controls.onchange = function()
{
    var brightness = document.getElementById('brightness'),
        val        = parseInt(this.value) - 50;
    
    if (val > 50 || val < -50)
    return false;
    
    brightness.style.backgroundColor = val > 0 ? 'white' : 'black';
    brightness.style.opacity = Math.abs(val/100) * 2;
}