<!DOCTYPE html>
<html>
    <head>
        <title>range slider brightness - darkcode</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
    </head>
    <body>
        <div class="container">
            <div class="brightness-box">
                <i class="far fa-sun"></i>
                <input type="range" id="range" min="10" max="100" value="100">
                <i class="fas fa-sun"></i>
            </div>
        </div>
    </body>
</html>
* {
     margin:0;
     padding:0;
     box-sizing:border-box;
}

.container {
    background:url(https://images.wallpaperscraft.com/image/city_coast_glow_167464_3840x2400.jpg) no-repeat center;
    background-size:cover;
    
    min-height:100vh;
    
    display:flex;
    align-items:center;
    justify-content:center;
}

.brightness-box {
    width:400px;
    height:60px;
    
    background:#f9f9f9;
    
    border-radius:8px;
    
    padding:0 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brightness-box i {
    margin:0 10px;
}

#range {
    width:100%;
    height:3px;
    
    /*tira a barra do input range*/
    -webkit-appearance:none;
    
    background:#0a85ff;
    
    outline:none;
}

#range::-webkit-slider-thumb {
    -webkit-appearance:none;
    
    background:#333;
    
    width:22px;
    height:22px;
    
    border-radius:50%;
    
    cursor:pointer;
}
rangeInput = document.getElementById("range");
container = document
    .getElementsByClassName("container")[0];
    
rangeInput.addEventListener("change", function() {
    container.style.filter = "brightness(" + rangeInput.value + "%)";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.