Home Web Development JavaScript JavaScript Price Range Slider With HTML CSS | Min and Max Price

JavaScript Price Range Slider With HTML CSS | Min and Max Price

September 26, 2019

16448

How we can create price range slider with minimum and maximum value? Solution: See this JavaScript Price Range Slider With HTML CSS, Min and Max Price Select.

Previously I have shared Range Slider, but this something different because there you can choose two values minimum and maximum. Budget sliders are used for selecting the budget, meant how much money they want to spend. If anyone’s budget is between 1k to 5k then this slider is perfect for choosing the amount.

Today you will learn to create price between min and max range slider. Basically, here is a range slider with two handles, using one you can choose the minimum value and using another you can select the maximum value. You also can put numbers in the text input fields, then the slider also will move.

So, Today I am sharing JavaScript Price Range Slider With HTML CSS. Here I have used jQuery for creating this program, as you know it is a JS library that’s why I am putting this in JavaScript category. Basically, this is basic HTML range input but CSS styled the design and jQuery changing the values on the slide and putting number manually.

If you are thinking now how this dual handle range slider actually is, then see the preview given below.

Preview Of Min and Max Price Between Slider

See this video preview to getting an idea of how this dual handle range looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

JavaScript Price Range Slider With HTML CSS Source Code

Before sharing source code, let’s talk about it. First, I have placed two number input and two range input using HTML <input type=""> tag. Also I have put minimum and maximum values in the inputs. Now I have created a line with the dotted points as you can see in the preview, for creating that I have used SVG.

Now using CSS I have placed all the elements on the right place. For styling the input elements I have put values on input[type=#]: tag, and fill colors, give styles, etc. Creating two handles or thumbs I have created two input and override them on each other. To styling, the thumb used ::-webkit-slider-thumb to style the element (info).

jQuery here fetches the values of range using querySelectorAll command and stored in variables. Now it detects the actions and changes HTML and CSS values according to them. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Price Range Slider | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="price-slider"><span>from
    <input type="number" value="5000" min="0" max="120000"/>	to
    <input type="number" value="50000" min="0" max="120000"/></span>
  <input value="25000" min="0" max="120000" step="500" type="range"/>
  <input value="50000" min="0" max="120000" step="500" type="range"/>
  <svg width="100%" height="24">
    <line x1="4" y1="0" x2="300" y2="0" stroke="#212121" stroke-width="12" stroke-dasharray="1 28"></line>
  </svg>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Price Range Slider | Webdevtrick.com</title>

</head>

<body>

<div class="price-slider"><span>from

<input type="number" value="5000" min="0" max="120000"/> to

</svg>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given below.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
body {
  display: flex;
  height: 100vh;
}
input {
  box-shadow: 0;
  outline: 0;
}
.price-slider {
  width: 300px;
  margin: auto;
  text-align: center;
  position: relative;
  height: 6em;
}
.price-slider svg,
.price-slider input[type=range] {
  position: absolute;
  left: 0;
  bottom: 0;
}
input[type=number] {
  border: 1px solid #ddd;
  text-align: center;
  font-size: 1.6em;
  -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type=number]:invalid,
input[type=number]:out-of-range {
  border: 2px solid #e60023;
}
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #1da1f2;
}
input[type=range]:focus::-ms-fill-lower {
  background: #1da1f2;
}
input[type=range]:focus::-ms-fill-upper {
  background: #1da1f2;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: #1da1f2;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}
input[type=range]::-webkit-slider-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #1da1f2;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: #1da1f2;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}
input[type=range]::-moz-range-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #1da1f2;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
  background: #1da1f2;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}
input[type=range]::-ms-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #1da1f2;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

display: flex;

height: 100vh;

}

input {

box-shadow: 0;

outline: 0;

}

.price-slider {

width: 300px;

margin: auto;

text-align: center;

position: relative;

height: 6em;

}

.price-slider svg,

.price-slider input[type=range] {

position: absolute;

left: 0;

bottom: 0;

}

input[type=number] {

border: 1px solid #ddd;

text-align: center;

font-size: 1.6em;

-moz-appearance: textfield;

}

input[type=number]::-webkit-outer-spin-button,

input[type=number]::-webkit-inner-spin-button {

-webkit-appearance: none;

}

input[type=number]:invalid,

input[type=number]:out-of-range {

border: 2px solid #e60023;

}

input[type=range] {

-webkit-appearance: none;

width: 100%;

}

input[type=range]:focus {

outline: none;

}

input[type=range]:focus::-webkit-slider-runnable-track {

background: #1da1f2;

}

input[type=range]:focus::-ms-fill-lower {

background: #1da1f2;

}

input[type=range]:focus::-ms-fill-upper {

background: #1da1f2;

}

input[type=range]::-webkit-slider-runnable-track {

width: 100%;

height: 5px;

cursor: pointer;

animate: 0.2s;

background: #1da1f2;

border-radius: 1px;

box-shadow: none;

border: 0;

}

input[type=range]::-webkit-slider-thumb {

z-index: 2;

position: relative;

box-shadow: 0px 0px 0px #000;

border: 1px solid #1da1f2;

height: 18px;

width: 18px;

border-radius: 25px;

background: #a1d0ff;

cursor: pointer;

-webkit-appearance: none;

margin-top: -7px;

}

input[type=range]::-moz-range-track {

width: 100%;

height: 5px;

cursor: pointer;

animate: 0.2s;

background: #1da1f2;

border-radius: 1px;

box-shadow: none;

border: 0;

}

input[type=range]::-moz-range-thumb {

z-index: 2;

position: relative;

box-shadow: 0px 0px 0px #000;

border: 1px solid #1da1f2;

height: 18px;

width: 18px;

border-radius: 25px;

background: #a1d0ff;

cursor: pointer;

}

input[type=range]::-ms-track {

width: 100%;

height: 5px;

cursor: pointer;

animate: 0.2s;

background: transparent;

border-color: transparent;

color: transparent;

}

input[type=range]::-ms-fill-lower,

input[type=range]::-ms-fill-upper {

background: #1da1f2;

border-radius: 1px;

box-shadow: none;

border: 0;

}

input[type=range]::-ms-thumb {

z-index: 2;

position: relative;

box-shadow: 0px 0px 0px #000;

border: 1px solid #1da1f2;

height: 18px;

width: 18px;

border-radius: 25px;

background: #a1d0ff;

cursor: pointer;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
(function() {

  var parent = document.querySelector(".price-slider");
  if(!parent) return;

  var
    rangeS = parent.querySelectorAll("input[type=range]"),
    numberS = parent.querySelectorAll("input[type=number]");

  rangeS.forEach(function(el) {
    el.oninput = function() {
      var slide1 = parseFloat(rangeS[0].value),
        	slide2 = parseFloat(rangeS[1].value);

      if (slide1 > slide2) {
				[slide1, slide2] = [slide2, slide1];
      }

      numberS[0].value = slide1;
      numberS[1].value = slide2;
    }
  });

  numberS.forEach(function(el) {
    el.oninput = function() {
			var number1 = parseFloat(numberS[0].value),
					number2 = parseFloat(numberS[1].value);
			
      if (number1 > number2) {
        var tmp = number1;
        numberS[0].value = number2;
        numberS[1].value = tmp;
      }

      rangeS[0].value = number1;
      rangeS[1].value = number2;

    }
  });

})();

// Code By Webdevtrick ( https://webdevtrick.com )

(function() {

var parent = document.querySelector(".price-slider");

if(!parent) return;

var

rangeS = parent.querySelectorAll("input[type=range]"),

numberS = parent.querySelectorAll("input[type=number]");

rangeS.forEach(function(el) {

el.oninput = function() {

var slide1 = parseFloat(rangeS[0].value),

slide2 = parseFloat(rangeS[1].value);

if (slide1 > slide2) {

[slide1, slide2] = [slide2, slide1];

}

numberS[0].value = slide1;

numberS[1].value = slide2;

}

});

numberS.forEach(function(el) {

el.oninput = function() {

var number1 = parseFloat(numberS[0].value),

number2 = parseFloat(numberS[1].value);

if (number1 > number2) {

var tmp = number1;

numberS[0].value = number2;

numberS[1].value = tmp;

}

rangeS[0].value = number1;

rangeS[1].value = number2;

}

});

})();

That’s It. Now you have successfully created JavaScript Price Range Slider With HTML CSS, Min and Max Price Between slider. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

1 COMMENT

Kiran Bhagat October 31, 2019 At 2:07 pm

Min values should not go above max and vice versa.
How to achieve these

Reply

JavaScript Price Range Slider With HTML CSS | Min and Max Price

Preview Of Min and Max Price Between Slider

JavaScript Price Range Slider With HTML CSS Source Code

1 COMMENT

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY