<!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 + "%)";
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.