Hey everyone. Welcome to today’s tutorial. In this tutorial, we will learn how to create a double range slider. To build this slider, we need HTML, CSS and Javascript.
A typical slider consists of a slider track and a movable thumb. The user has to move the thumb horizontally across the slider to set the value. Unlike a typical slider, the double slider consists of two thumbs. In a double-range slider, the user can set two values.
This is an intermediate-level javascript project. If you are looking for more such projects to practice your javascript skills, you can check out this playlist here. This playlist consists of 100+ javascript projects.
The difficulty of these projects varies from simple to quite complex ones. Hence this playlist is suitable for all kinds of javascript learners, including javascript beginners to javascript experts.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out the video below. Also do not forget to subscribe to my youtube channel, where I post new tips, tricks and tutorials regularly.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called- ‘Double Range Slider’. Inside this folder, we have three files. These files are – index.html, style.css and script.js. The first file is index.html which is our HTML document. Next, we have style.css which is the stylesheet. And finally, we have script.js which is the script file.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
Our HTML code consists of two span elements to display the values. Followed by the span elements we have a container that wraps a div with the class name ‘slider-track’ and two range sliders.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Double Range Slider</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="values">
<span id="range1">
0
</span>
<span> ‐ </span>
<span id="range2">
100
</span>
</div>
<div class="container">
<div class="slider-track"></div>
<input type="range" min="0" max="100" value="30" id="slider-1" oninput="slideOne()">
<input type="range" min="0" max="100" value="70" id="slider-2" oninput="slideTwo()">
</div>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
CSS:
We use CSS to position and style these sliders. For this, copy the code below and paste it into your stylesheet.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins",sans-serif;
}
body{
height: 100vh;
display: -ms-grid;
display: grid;
background-color: #3264fe;
place-items: center;
}
.wrapper{
position: relative;
width: 95vmin;
background-color: #ffffff;
padding: 50px 40px 20px 40px;
border-radius: 10px;
}
.container{
position: relative;
width: 100%;
height: 100px;
margin-top: 30px;
}
input[type="range"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
outline: none;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
background-color: transparent;
pointer-events: none;
}
.slider-track{
width: 100%;
height: 5px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
border-radius: 5px;
}
input[type="range"]::-webkit-slider-runnable-track{
-webkit-appearance: none;
height: 5px;
}
input[type="range"]::-moz-range-track{
-moz-appearance: none;
height: 5px;
}
input[type="range"]::-ms-track{
appearance: none;
height: 5px;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
height: 1.7em;
width: 1.7em;
background-color: #3264fe;
cursor: pointer;
margin-top: -9px;
pointer-events: auto;
border-radius: 50%;
}
input[type="range"]::-moz-range-thumb{
-webkit-appearance: none;
height: 1.7em;
width: 1.7em;
cursor: pointer;
border-radius: 50%;
background-color: #3264fe;
pointer-events: auto;
}
input[type="range"]::-ms-thumb{
appearance: none;
height: 1.7em;
width: 1.7em;
cursor: pointer;
border-radius: 50%;
background-color: #3264fe;
pointer-events: auto;
}
input[type="range"]:active::-webkit-slider-thumb{
background-color: #ffffff;
border: 3px solid #3264fe;
}
.values{
background-color: #3264fe;
width: 32%;
position: relative;
margin: auto;
padding: 10px 0;
border-radius: 5px;
text-align: center;
font-weight: 500;
font-size: 25px;
color: #ffffff;
}
.values:before{
content: "";
position: absolute;
height: 0;
width: 0;
border-top: 15px solid #3264fe;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
margin: auto;
bottom: -14px;
left: 0;
right: 0;
}
Javascript:
We finally implement the functionality for our double range slider with javascript. For this once again copy the code provided to you below and paste it into your script file.
window.onload = function(){
slideOne();
slideTwo();
}
let sliderOne = document.getElementById("slider-1");
let sliderTwo = document.getElementById("slider-2");
let displayValOne = document.getElementById("range1");
let displayValTwo = document.getElementById("range2");
let minGap = 0;
let sliderTrack = document.querySelector(".slider-track");
let sliderMaxValue = document.getElementById("slider-1").max;
function slideOne(){
if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
sliderOne.value = parseInt(sliderTwo.value) - minGap;
}
displayValOne.textContent = sliderOne.value;
fillColor();
}
function slideTwo(){
if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
sliderTwo.value = parseInt(sliderOne.value) + minGap;
}
displayValTwo.textContent = sliderTwo.value;
fillColor();
}
function fillColor(){
percent1 = (sliderOne.value / sliderMaxValue) * 100;
percent2 = (sliderTwo.value / sliderMaxValue) * 100;
sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #3264fe ${percent1}% , #3264fe ${percent2}%, #dadae5 ${percent2}%)`;
}
That’s all for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys, so if you have any queries, suggestions, or feedback, you can comment below.
Happy Coding!
rre
Thank you so much! Really saved my day.
Best regards
Christian
Thanks a lot. Saved me a head load of stress.
Is it possible to set other values than 0 to 100. I tried to start of at 500 to 2000. But I can’t get the fillcolor to start at the bottom, it starts a bit in on the range.
You have to play around with percentage value by adding or subtracting some value.
For Example:
I used 1-10 and i have +/- 5 from that percentage
percent1 = (sliderOne.value / sliderMaxValue) * 100 – 5;
percent2 = (sliderTwo.value / sliderMaxValue) * 100 – 5;
Doesn’t work
d