Simple Price Range Slider With HTML CSS and JavaScript

In this tutorial we will see how to make a Simple Price Range Slider With HTML CSS and JavaScript. Pure CSS and Vanilla JavaScript is used to make this price range slider, CSS code and JavaScript code is given.

Table of Contents

HTML Code

Take a look at the HTML code given below.


<div class="priceSlider">
<h1>Price Range:</h1>
<p>Move Slider to choose the price range.</p> 
    
<div class="min-max">
 <div class="min">
     <label>Min</label><span id="min-value"></span>
 </div>
 <div class="max">
     <label>Max</label><span id="max-value"></span>
 </div>     
</div> 
    
<div class="min-max-range">
<input type="range" min="0" max="5000" value="2000" class="range" id="min">
<input type="range" min="5001" max="10000" value="8000" class="range" id="max">      
</div>    
    
<div style="clear: both;"></div>    
</div>

CSS Code

CSS code is given below.


<style>      
body
{
margin: 0;
padding: 0;
background-color: #00E673;
font-family: 'Barlow Condensed' , sans-serif;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;    
}
.priceSlider
{
width: 200px;
background-color: #fff;
border-radius: 5px;
padding: 10px 20px;
box-shadow: 0px 0px 3px 1px #888;    
}
.priceSlider h1
{
font-size: 17px;
font-weight: bold;
}
.priceSlider p
{
font-size: 10px;
margin-top: 20px;    
}
.min-max label
{
font-size: 14px;
float: left;
margin-right: 5px;
line-height: 1.6;    
}
.min
{
float: left;    
}
.max
{
float: right;    
}
.min-max
{
width: 90%;
max-width: 200px;
margin: 0 auto;
padding: 25px 0px 15px 0px;    
}
.min-max span
{
font-size: 10px;
text-align: center;
display: inline-block;
width: 30px;
border: 1px solid #dedede;    
}
.min-max-range
{
padding: 30px 0px 20px 0px;    
}
.range
{
-webkit-appearance:none;
appearance:none;
width: 50%;
height: 10px;
max-width: 400px;
background-color: #dedede;
margin: 0;
padding: 0;
outline: none;
float: left;    
}
.range::-webkit-slider-thumb
{
-webkit-appearance:none;
appearance:none;
background-color: #0070BF;
height: 10px;
width: 10px;
border-radius: 50%;
cursor: pointer;
}
.range::moz-range-thumb
{
-webkit-appearance:none;
appearance:none;
background-color: #0070BF;
height: 10px;
width: 10px;
border-radius: 50%;
cursor: pointer;
}
</style>

JavaScript Code

Take a look at the Pure JavaScript Code given below.


<script>
var minSlider = document.getElementById('min');
var maxSlider = document.getElementById('max');

var outputMin = document.getElementById('min-value');
var outputMax = document.getElementById('max-value');

outputMin.innerHTML = minSlider.value;
outputMax.innerHTML = maxSlider.value;

minSlider.oninput = function(){
 outputMin.innerHTML=this.value;    
}

maxSlider.oninput = function(){
 outputMax.innerHTML=this.value;    
}
</script>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Price Range Slider With HTML CSS and JavaScript.