Creating Price Range Slider using JavaScript, HTML and CSS

Creating Price Range Slider using JavaScript, HTML and CSS

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

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.

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.

<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>

style.css

Now create a CSS file named ‘_style.css_‘ and put these codes given below.

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.

(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

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS. Learn Web Development by creating a Blog with HTML and CSS. Make a web applications using HTML5 and CSS3. Create a blog from Scratch.

How to Code Tic-Tac-Toe Game in HTML, CSS and JavaScript

We will be coding a tic tac toe game using HTML, JavaScript & CSS. We will begin by creating the tic tac toe grid with html & css. We will use JavaScript in an object orientated style to create the tic tac toe game.

Introduction To HTML & CSS: Web Development For Beginners

Introduction To HTML & CSS: Web Development For Beginners - Complete HTML & CSS web developer bootcamp. Learn & practice website design using HTML5 & CSS3 web development resources