In this article you will know how to create Double Range Slider using HTML, CSS and JavaScript. If you want to create Custom Double Range Slider then this article is for you.
A JavaScript Double Range Slider is a user interface element commonly used in web development to allow users to select a range of values within a specified range. Unlike a single slider that represents a single value along a scale, a double range slider consists of two sliders that enable the selection of both a minimum and maximum value simultaneously.
Earlier I have shared tutorials on creating many types of JavaScript range sliders. Now time to create Dual Range Slider using JavaScript.
Double Range Slider using HTML, CSS, Javascript
Range sliders are essential UI components for selecting a range of values within a specified range. However, sometimes a single slider may not be sufficient, and a double range slider becomes necessary to define both a minimum and maximum range.
In this article, we’ll explore how to create a double range slider using HTML, CSS, and JavaScript.
See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.
Below you will find all the code to create this JavaScript Double Range Slider. If you want to download the source codes then use the download button below the article.
Step 1: Dual Range Slider HTML Code
Let’s start by setting up the HTML structure for our double range slider. This basic HTML structure includes two range input elements for minimum and maximum values, along with labels and an output section to display the selected range.
<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>Step 2: Double Range Slider CSS Code
Now, let’s style our double range slider using CSS. This CSS code provides a clean and centered layout for our double range slider.
/* Reset default styles and apply box-sizing */
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* Apply styles to the entire body */
body {
height: 100vh;
display: -ms-grid;
display: grid;
background-color: #3264fe;
place-items: center;
}
/* Style for the main container wrapper */
.wrapper {
position: relative;
width: 95vmin;
background-color: #ffffff;
padding: 50px 40px 20px 40px;
border-radius: 10px;
}
/* Style for the container holding the sliders */
.container {
position: relative;
width: 100%;
height: 100px;
margin-top: 30px;
}
/* Style for range input sliders */
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;
}
/* Style for the slider track */
.slider-track {
width: 100%;
height: 5px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
border-radius: 5px;
}
/* Specific styles for different browser appearances of slider track */
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;
}
/* Style for the slider thumbs (handles) */
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"]::-ms-thumb {
appearance: none;
height: 1.7em;
width: 1.7em;
cursor: pointer;
border-radius: 50%;
background-color: #3264fe;
pointer-events: auto;
}
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;
}
/* Style for the slider thumb when in active state (being clicked) */
input[type="range"]:active::-webkit-slider-thumb {
background-color: #ffffff;
border: 3px solid #3264fe;
}
/* Style for the values display container */
.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;
}
/* Triangle shape below the values display container */
.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;
}
Step 3: Custom Double Range Slider JS Code
Now, let’s add functionality to our double range slider using JavaScript. This JavaScript code ensures that the minimum and maximum range values are updated dynamically as the sliders are moved. It also prevents the minimum range from exceeding the maximum range and vice versa.
// Execute functions when the window has fully loaded
window.onload = function(){
slideOne();
slideTwo();
}
// Get references to HTML elements
let sliderOne = document.getElementById("slider-1");
let sliderTwo = document.getElementById("slider-2");
let displayValOne = document.getElementById("range1");
let displayValTwo = document.getElementById("range2");
// Set minimum gap between sliders
let minGap = 0;
// Get the reference to the slider track element
let sliderTrack = document.querySelector(".slider-track");
// Get the maximum value of the sliders
let sliderMaxValue = document.getElementById("slider-1").max;
// Function to handle changes in the first slider
function slideOne(){
// Ensure that the minimum gap is maintained between sliders
if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
sliderOne.value = parseInt(sliderTwo.value) - minGap;
}
// Update the displayed value for the first slider
displayValOne.textContent = sliderOne.value;
// Update the color of the slider track based on the selected range
fillColor();
}
// Function to handle changes in the second slider
function slideTwo(){
// Ensure that the minimum gap is maintained between sliders
if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
sliderTwo.value = parseInt(sliderOne.value) + minGap;
}
// Update the displayed value for the second slider
displayValTwo.textContent = sliderTwo.value;
// Update the color of the slider track based on the selected range
fillColor();
}
// Function to update the color of the slider track based on the selected range
function fillColor(){
// Calculate the percentage position of the first and second sliders
percent1 = (sliderOne.value / sliderMaxValue) * 100;
percent2 = (sliderTwo.value / sliderMaxValue) * 100;
// Set the background color of the slider track using a linear gradient
sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #3264fe ${percent1}% , #3264fe ${percent2}%, #dadae5 ${percent2}%)`;
}
Now, with the HTML, CSS, and JavaScript combined, you have a fully functional double range slider that users can interact with to select a range of values.
Let me know how you like this JavaScript Double Range Slider by commenting. If you want to get more custom double range slider tutorials like this then use the search bar.
Creating a price slider with min-max input using HTML, CSS, and JavaScript involves using the <input type="range"> element for the slider and two <input type="number"> elements for the minimum and maximum values. Here’s a simple example:
<style>
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.price-slider-container {
text-align: center;
}
input[type=”range”] {
width: 80%;
margin-bottom: 10px;
}
input[type=”number”] {
width: 45%;
text-align: center;
}
</style>
<div class=”price-slider-container”>
<label for=”priceRange”>Price Range:</label>
<input type=”range” id=”priceRange” min=”0″ max=”1000″ step=”10″ value=”500″>
<br>
<label for=”minPrice”>Min Price:</label>
<input type=”number” id=”minPrice” min=”0″ max=”1000″ step=”10″ value=”0″>
<label for=”maxPrice”>Max Price:</label>
<input type=”number” id=”maxPrice” min=”0″ max=”1000″ step=”10″ value=”1000″>
</div>
<script>
const priceRange = document.getElementById(‘priceRange’);
const minPrice = document.getElementById(‘minPrice’);
const maxPrice = document.getElementById(‘maxPrice’);
// Update min and max input values when the slider changes
priceRange.addEventListener(‘input’, updateInputValues);
// Update slider value when min or max input values change
minPrice.addEventListener(‘input’, updateSliderValue);
maxPrice.addEventListener(‘input’, updateSliderValue);
function updateInputValues() {
minPrice.value = priceRange.value;
maxPrice.value = priceRange.value;
}
function updateSliderValue() {
const minValue = parseInt(minPrice.value);
const maxValue = parseInt(maxPrice.value);
if (minValue < parseInt(priceRange.min) || isNaN(minValue)) {
minPrice.value = priceRange.min;
}
if (maxValue > parseInt(priceRange.max) || isNaN(maxValue)) {
maxPrice.value = priceRange.max;
}
priceRange.value = (minValue + maxValue) / 2;
}
</script>
This Double Range Slider example sets up a price range slider with a minimum value of 0, a maximum value of 1000, and a step of 10. The slider is accompanied by two input fields for the minimum and maximum values.
Here’s an example of a dual-range slider using HTML, CSS, and JavaScript. A dual-range slider allows you to select a range between two values:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Dual Range Slider</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.range-slider-container {
text-align: center;
}
input[type=”range”] {
width: 80%;
margin-bottom: 10px;
}
span {
display: inline-block;
width: 45px;
text-align: center;
}
</style>
</head>
<body>
<div class=”range-slider-container”>
<label for=”dualRange”>Select Range:</label>
<br>
<span id=”minValue”>0</span>
<input type=”range” id=”dualRange” min=”0″ max=”100″ step=”1″ value=”25″>
<span id=”maxValue”>25</span>
</div>
<script>
const dualRange = document.getElementById(‘dualRange’);
const minValue = document.getElementById(‘minValue’);
const maxValue = document.getElementById(‘maxValue’);
// Initialize the values
minValue.textContent = dualRange.min;
maxValue.textContent = dualRange.value;
// Update max value when the slider changes
dualRange.addEventListener(‘input’, () => {
maxValue.textContent = dualRange.value;
});
</script>
</body>
</html>
Creating a double range slider using HTML and JavaScript involves using the <input> element with the type="range" attribute. Here’s a simple example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Double Range Slider</title>
<style>
/* Optional styling for better visualization */
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.range-slider {
width: 300px;
margin: 20px;
}
</style>
</head>
<body>
<div class=”range-slider”>
<label for=”range1″>Range 1:</label>
<input type=”range” id=”range1″ min=”0″ max=”100″ value=”25″>
<label for=”range2″>Range 2:</label>
<input type=”range” id=”range2″ min=”0″ max=”100″ value=”75″>
<p>Values: <span id=”value1″>25</span> – <span id=”value2″>75</span></p>
</div>
<script>
// Get the range input elements and the span elements for displaying values
var range1 = document.getElementById(‘range1’);
var range2 = document.getElementById(‘range2’);
var value1 = document.getElementById(‘value1’);
var value2 = document.getElementById(‘value2’);
// Initial display of values
value1.textContent = range1.value;
value2.textContent = range2.value;
// Update values when sliders are moved
range1.addEventListener(‘input’, function () {
value1.textContent = range1.value;
});
range2.addEventListener(‘input’, function () {
value2.textContent = range2.value;
});
</script>
</body>
</html>
This example sets up two range sliders (range1 and range2) with minimum and maximum values of 0 and 100. The values are displayed next to the sliders, and JavaScript is used to update the displayed values as the sliders are moved.