Hey friends, today in this blog, you’ll learn how to create a Price Range Slider or Double Range Slider with Min-Max Inputs in HTML CSS & JavaScript. In the earlier blog, I have shared a Range Slider in HTML CSS & JavaScript, and now it’s time to create a price, multi or double range slider in vanilla JavaScript.
A price range slider is a slider where the user can slide the meter to select the appropriate price range. In this project (Price Range Slider in JavaScript), as you can see in the preview image, there are min-max inputs and a price range slider.
You can use a slider or enter minimum and maximum price values to select the appropriate price range. Mostly, this type of slider is used on e-commerce sites. If you’re feeling difficulty to understand what I’m saying then you can watch a demo or full video tutorial of this price range slider.
Video Tutorial of Price Range Slider in JavaScript
In the above video, you have seen the demo of this price range slider and knew how I created it using HTML CSS & JavaScript. I tried to make the codes as simple as I can so if you’re a beginner and know basic JavaScript then you can try to make this slider 2, 3 times to understand the codes more deeply.
If you liked this range slider and want to get the source codes of this project then you can easily get it from the bottom of this page. You can copy-paste the codes or download and use them in your projects.
You might like this:
- Add Tags Input Box in JavaScript
- Drag & Drop or Browse File Upload
- Animated Range Slider in JavaScript
- Draggable Div Element in JavaScript
Price Range Slider in JavaScript [Source Codes]
To create this Custom Price Range Slider. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the given codes into your file. You can also download the source code files of this range slidder from the given download button.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Price Range Slider | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<header>
<h2>Price Range</h2>
<p>Use slider or enter min and max price</p>
</header>
<div class="price-input">
<div class="field">
<span>Min</span>
<input type="number" class="input-min" value="2500">
</div>
<div class="separator">-</div>
<div class="field">
<span>Max</span>
<input type="number" class="input-max" value="7500">
</div>
</div>
<div class="slider">
<div class="progress"></div>
</div>
<div class="range-input">
<input type="range" class="range-min" min="0" max="10000" value="2500" step="100">
<input type="range" class="range-max" min="0" max="10000" value="7500" step="100">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #17A2B8;
}
::selection{
color: #fff;
background: #17A2B8;
}
.wrapper{
width: 400px;
background: #fff;
border-radius: 10px;
padding: 20px 25px 40px;
box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
header h2{
font-size: 24px;
font-weight: 600;
}
header p{
margin-top: 5px;
font-size: 16px;
}
.price-input{
width: 100%;
display: flex;
margin: 30px 0 35px;
}
.price-input .field{
display: flex;
width: 100%;
height: 45px;
align-items: center;
}
.field input{
width: 100%;
height: 100%;
outline: none;
font-size: 19px;
margin-left: 12px;
border-radius: 5px;
text-align: center;
border: 1px solid #999;
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.price-input .separator{
width: 130px;
display: flex;
font-size: 19px;
align-items: center;
justify-content: center;
}
.slider{
height: 5px;
position: relative;
background: #ddd;
border-radius: 5px;
}
.slider .progress{
height: 100%;
left: 25%;
right: 25%;
position: absolute;
border-radius: 5px;
background: #17A2B8;
}
.range-input{
position: relative;
}
.range-input input{
position: absolute;
width: 100%;
height: 5px;
top: -5px;
background: none;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb{
height: 17px;
width: 17px;
border-radius: 50%;
background: #17A2B8;
pointer-events: auto;
-webkit-appearance: none;
box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
input[type="range"]::-moz-range-thumb{
height: 17px;
width: 17px;
border: none;
border-radius: 50%;
background: #17A2B8;
pointer-events: auto;
-moz-appearance: none;
box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
const rangeInput = document.querySelectorAll(".range-input input"),
priceInput = document.querySelectorAll(".price-input input"),
range = document.querySelector(".slider .progress");
let priceGap = 1000;
priceInput.forEach(input =>{
input.addEventListener("input", e =>{
let minPrice = parseInt(priceInput[0].value),
maxPrice = parseInt(priceInput[1].value);
if((maxPrice - minPrice >= priceGap) && maxPrice <= rangeInput[1].max){
if(e.target.className === "input-min"){
rangeInput[0].value = minPrice;
range.style.left = ((minPrice / rangeInput[0].max) * 100) + "%";
}else{
rangeInput[1].value = maxPrice;
range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
}
}
});
});
rangeInput.forEach(input =>{
input.addEventListener("input", e =>{
let minVal = parseInt(rangeInput[0].value),
maxVal = parseInt(rangeInput[1].value);
if((maxVal - minVal) < priceGap){
if(e.target.className === "range-min"){
rangeInput[0].value = maxVal - priceGap
}else{
rangeInput[1].value = minVal + priceGap;
}
}else{
priceInput[0].value = minVal;
priceInput[1].value = maxVal;
range.style.left = ((minVal / rangeInput[0].max) * 100) + "%";
range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
}
});
});
That’s all, now you’ve successfully built a Custom Price Range Slider in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Thank you! nice code!
hello can you please guide how i can also uplode my demo project in wordpress like you have don
You’ve to upload your project folder to the hosting. Login to hosting > go to file manager > go inside public_html and upload your project folder here. The name of your folder will be the url.
Thanks for the great article! How can I modify this to change the slider orientation? Long time WPF developer and migrating over to the web. Appreciate all the help I can get.
Hi, what is the function of parseInt[0] & parseInt[1] in your code?
Can you explain the javascript more details ? I don’t understand how it is work. Why we need to use parseInt[0]?
range.style.left = ((minVal / rangeInput[0].max) * 100) + “%”; How to get this formula?
Thank you
In this project, we’re getting a value of the value attribute of range input which is a string value. We can’t do a mathematic calculation with string So, I used parseInt and this method parses a string to the integer. You need to learn array, and its method forEach to understand this project code deeply.