How to create custom range sliders with CSS and JavaScript?

CSS Web Development Front End Technology Javascript

A range slider, is an input field in HTML, that accepts the type as a “range”. It is used to select a numeric value within the given specific range, we can pass the range inside the input field as shown below snippet of code

<input type = “range” min = “0” max = “100”/>

As you can see in the above snippet of code, the type is equal to the range and we provide the min = “0” and max = “100” values, which will be the range of the field.

The custom range sliders help customize the field range as per the need.

In the following article, let us understand how to create custom range sliders, using CSS and JavaScript.

Let’s create separate files for each language −

Using oninput() event

An oninput event is an HTML event that is used to perform the immediate action when a user enters a value in the input fields. Following is the snippet of code to use this event −

<input type = ‘’ oninput = ‘event name()’>

Following is the explanation of the code below −

HTML file(index.html)

This is the HTML file must be saved with a .html extension. In this file, we will create an input range field and that will be our custom range slider, inside the input field we will set the range. and also create a span tag to show the custom range slider value.

Following is the code of the HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Custom range Sliders</title>
</head>
<body>
   <h1>Custom Range Sliders with HTML, CSS and JavaScript</h1>
   <div class="sliders">
      <p>Custom Range Slider: </p>
      <input type="range" min = "1" max = "100" oninput="Range()" id = 'slider' title = 'range'><br>
      <span id = 'res'></span>
   </div>
</body>
</html>

CSS file(style.css)

This is the CSS file created with a .css extension. Using the CSS we will manage the styling of the HTML page.

Following is the snippet of code to connect the CSS file with the HTML file −

<link rel="stylesheet" href="index.css">

Following is the code of the CSS −

style.css

span{
   position: relative;
   top: 20px;
   left: 20px;
   font-size: 30px;
   font-weight: 700;
}

p{
   position: relative;
   left: 10px;
   font-size: 20px;
}

input[type='range']
{
   -webkit-appearance: none;
   width: 400px;
   height: 30px;
   background-color: black;
   border-radius: 60px;
}

#slider::-webkit-slider-thumb{
   -webkit-appearance: none;
   width: 50px;
   height: 50px;
   border-radius: 40px;
   appearance: none;
   cursor: pointer;
   background-color: blue;
}

JavaScript file(index.js)

This is the JavaScript file which must be saved with a .js extension. In JavaScript, we will write a program to fetch the input range value and show it to the users by using the innerHTML property.

Following is the snippet of code to connect the JavaScript file with the HTML file −

<script src = ‘index.html’>

Note − Instead of creating three separate files for HTML, CCS and JavaScript, you can create only one HTML file with a .html extension, and write the CSS code in the <style></style> tag above the body tag, write the JavaScript code inside the <script></script> tag just before the end the body tag or inside the head tag.

Following is the program of the JavaScript

index.js

 function Range() {
   //fetch the input range value through its id
   let range_value = document.getElementById('slider');
   //fetch the span tag through its id
   let result = document.getElementById('res');
   //show the value using innerHTML property
   res.innerHTML = "Range value is: " + range_value.value;
}

Example

On executing the above HTML, CSS, and JavaScript.


<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Custom range Sliders</title>
   <style>
      span{
         position: relative;
         top: 20px;
         left: 20px;
         font-size: 30px;
         font-weight: 700;
      }

      p{
         position: relative;
         left: 10px;
         font-size: 20px;
      }

      input[type='range']
      {
         -webkit-appearance: none;
         width: 400px;
         height: 30px;
         background-color: black;
         border-radius: 60px;
      }

      #slider::-webkit-slider-thumb{
         -webkit-appearance: none;
         width: 50px;
         height: 50px;
         border-radius: 40px;
         appearance: none;
         cursor: pointer;
         background-color: blue;
      }
   </style>
</head>
<body>
   <h1>Custom Range Sliders with HTML, CSS and JavaScript</h1>
   <script>
      function Range()
      {
         //fetch the input range value through its id
         let range_value = document.getElementById('slider');
         //fetch the span tag through its id
         let result = document.getElementById('res');
         //show the value using innerHTML property
         res.innerHTML = "Range value is: " + range_value.value;
      }
   </script>
   <div class="sliders">
      <p>Custom Range Slider: </p>
      <input type="range" min = "1" max = "100" oninput="Range()" id = 'slider' title = 'range'><br>
      <span id = 'res'></span>
   </div>
</body>
</html>

As you can see in the above program, we have used HTML, CSS, and JavaScript to create custom range sliders.

With the HTML, we create the content of the page. We first create an input field that accepts the range as a type, and inside the input field, we pass the min value equal to 1 and the max value equal to 100 as shown below −

<input type = ‘range’ min = ‘1’ max = ‘100’ oninput = ‘eventname()’>

And later on, we create an oninput event as you can see in the above snippet of code, the oninput event is used to calculate the value at the time the user enters the value in the input field. And then we fetch the input range value through its id as shown below −

let range_value = document.getElementById('slider');

We fetch the span tag and through the innerHTML property, we show the range slider value as shown below −

res.innerHTML = "Range value is: " + range_value.value;

Using onclick() event

An onclick() event is an HTML event, that is used to perform the action when the user clicks on a particular button. Following is a snippet of code to use the onclick event

<button onclick = ‘event_name()’>

Following is the program to create a custom range slider

Following is the code of the HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Custom range Sliders</title>
</head>
<body>
   <h2>Custom Range Sliders with HTML, CSS and JavaScript</h2>
   <div class="sliders">
      <p>Custom Range Slider: </p>
      <input type="range" min = "1" max = "100" id = 'slider' title = 'range'><br>
      <button id = 'btn'>Calulate Range</button>
      <span id = 'res'></span>
   </div>
</body>
</html>

Following is the CSS code

Style.css

span{ position: relative;
      top: 35px;
      left: 40px;
      font-size: 30px;
      font-weight: 700;
}

p{
   position: relative;
   left: 10px;
   font-size: 20px;
}

input[type='range']
{
   -webkit-appearance: none;
   width: 400px;
   height: 30px;
   background-color: yellow;
   border-radius: 60px;
}

#slider::-webkit-slider-thumb{
   -webkit-appearance: none;
   width: 50px;
   height: 50px;
   border-radius: 40px;
   appearance: none;
   cursor: pointer;
   background-color: red;
}

button{
   width: 150px;
   height: 40px;
   background-color: blue;
   color: white;
   border: none;
   cursor: pointer;
   position: relative;
   left: 20px;
   top: 30px;
   transition: 0.5s;
   border-radius: 5px;
}

button:hover{
   opacity: 0.7;
}

Following is the JavaScript program

index.js

let btn = document.getElementById('btn');
btn.onclick = function() {
   //fetch the input range value through its id
   let range_value = document.getElementById('slider');

   //fetch the span tag through its id
   let result = document.getElementById('res');
         
   //show the value using innerHTML property
   res.innerHTML = "Range value is: " + range_value.value;
}

Example

On executing the above HTML, CSS, and JavaScript.


<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Custom range Sliders</title>
   <style>
      span{ position: relative;
      top: 35px;
      left: 40px;
      font-size: 30px;
      font-weight: 700;
   }

   p{
      position: relative;
      left: 10px;
      font-size: 20px;
   }

   input[type='range']
   {
      -webkit-appearance: none;
      width: 400px;
      height: 30px;
      background-color: yellow;
      border-radius: 60px;
   }

   #slider::-webkit-slider-thumb{
      -webkit-appearance: none;
      width: 50px;
      height: 50px;
      border-radius: 40px;
      appearance: none;
      cursor: pointer;
      background-color: red;
   }

   button{
      width: 150px;
      height: 40px;
      background-color: blue;
      color: white;
      border: none;
      cursor: pointer;
      position: relative;
      left: 20px;
      top: 30px;
      transition: 0.5s;
      border-radius: 5px;
   }

   button:hover{
      opacity: 0.7;
   }
   </style>
</head>
<body>
   <h2>Custom Range Sliders with HTML, CSS and JavaScript</h2>
   <script>
      let btn = document.getElementById('btn');
      btn.onclick = function() {
         //fetch the input range value through its id
         let range_value = document.getElementById('slider');

         //fetch the span tag through its id
         let result = document.getElementById('res');
            
         //show the value using innerHTML property
         res.innerHTML = "Range value is: " + range_value.value;
      }
   </script>
   <div class="sliders">
      <p>Custom Range Slider: </p>
      <input type="range" min = "1" max = "100" id = 'slider' title = 'range'><br>
      <button id = 'btn'>Calulate Range</button>
      <span id = 'res'></span>
   </div>
</body>
</html>

In the above program, we have used HTML, CSS, and JavaScript, in the HTML we create an input field that accepts type as a range and then we create an HTML button (calculate range) and then we create a span tag to show the range value.

In the CSS file, we manage the styling of the page. In JavaScript, we fetch the HTML button by its id and later we use the onclick event as shown below −

let btn = document.getElementById('btn');
btn.onclick = function(){}

and then inside the function, we fetch the input range and show the value by using the innerHTML property when the user clicks on the button.

Vivek Verma

Updated on: 02-Nov-2022

675 Views

Kickstart Your Career

Get certified by completing the course

Get Started