Change Brightness using HTML Range Slider

In this tutorial we will see how to Change Brightness using HTML Range Slider. The JavaScript is used to read the value of range slider and then this value is used to change brightness.

Table of Contents

HTML Code

HTML Code is given below. The input element with type="range" is used to make a range slider. The min and max values of range slider are set using min and max attributes.

The range value is read and then used to set the brightness.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Brightness using Range Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <div class="main">
      <input type="range" id="brightness-range" min="10" max="100" value="100" onchange="fun(this)">
    </div>
  </div>
</body>    
</html>

CSS Code

CSS Code is given below.

body {    
  margin: 0;
  padding: 0;
}
#container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #22438C;    
}
.main {
  width: 500px;
  background: #FFF;
  border-radius: 10px;
  padding: 40px;
}
#brightness-range {
  width: 100%;
  -webkit-appearance: none;
  background: #E40404;
  height: 10px;
  outline: none;
  cursor: pointer;    
}
#brightness-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  background: #22438C;    
}

JavaScript Code

JavaScript Code is given below, The value of range slider is being used to change the brightness of main container.

<script>
function fun(e)
{
var container = document.getElementById('container');
var val = e.value;
container.setAttribute("style", "filter: brightness("+val+"%);");
}
</script>

Video Tutorial

Watch video tutorial on how to Change Brightness using HTML Range Slider.