Sliders

Free Price Range Slider in JavaScript

We were developing this UI for different websites but this time we decided to create a price range slider for an eCommerce website. In a recent post, we discussed how to create a countdown timer app in Html, CSS, and CSS languages. Let’s discuss how we have created this min-max price range slider in Html, CSS, and javascript.

Importance of Price Range Slider:

On an eCommerce website, there are a lot of products and it is difficult for the users to explore all the products. They are provided with a price range filter that helps them adjust the price. By using this filter the website will show the users relevant products.

They are also free to set min and max values. They can search in any way by reducing the complexity. Min and max value boxes are ready to get the input and then process that input. After processing the input users will be shown a relevant output. In this way price, slider/filter reduces the complexity of the users.

Components of Price range slider:

This slider is created using different languages. We have used the tags and properties of these languages.

Background:

We have set a Gradient color for the background. But we can have different types of backgrounds. The background may contain a picture or solid background. This background color is easily replaceable with a background or picture.

Slider Box:

We have created a box containing the content of the slider. This box has a length and height. You can also observe that it has a normal radius from the corners. The corners will become more round if we increase the value of the radius.

In this box, we have a heading <h1> and a paragraph <p>. Below this, we have created two input fields. These fields are created for getting the minimum and maximum values. These boxes also have their properties. Like color, font size, font family, text limit, and border as well.

Then we created a solid line. Above this line, we have used two balls for moving left and right. These balls will determine the min and max values. This slider is created using the slider property of CSS.

Outside of this box, we have again added the text. This text has a description in the form of a paragraph. Then it has the link to the website. This link is working and you can connect text or pictures with anything on the internet with the help of the anchor text.

Let’s see how to create this type of slider using Html and CSS languages for free with source code.

How to create a price range slider using Javascript?

For creating this slider we will use the below steps.

Download a code editor
Html source code
CSS source code
JS source code
Download source code

Html source code:

<html>

<head>
  <meta charset="utf-8">
  <title>Price Range Slider | FantacyDesigns</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="d-flex">

    <div class="wrapper">
      <header>
        <h2>Price Range Filter</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>

    <!--   Support Section -->
    <div class="support-box">
       <h1>Best For Ecommerce <br> Web Projects</h1>
       </br>
      
      </br></br>
    </div>
  </div>



</body>
</html>

<html>

<head>

<title>Price Range Slider | FantacyDesigns</title>

</head>

<body>

<h2>Price Range Filter</h2>

<p>Use slider or enter min and max price</p>

</header>

</div>

</div>

</div>

</div>

<h1>Best For Ecommerce <br> Web Projects</h1>

</br>

</br></br>

</div>

</body>

</html>

CSS Source Code:

/* 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;background-image: linear-gradient(to top, #09203f, #102d50, #163a61, #1b4873, #1f5785);
}
::selection {
  color: #fff;
  background: #17a2b8;

}
h1{
color:#fff;
border-bottom: 2px solid #fff;
border-top: 2px solid #fff;
padding-bottom: 5px;

}
.wrapper {
  width: 400px;
  background: #fff;
  border-radius: 10px;
  padding: 20px 25px 40px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}
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: #1F5785;
}
.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: #1F5785;
  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: #1F5785;
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

/* Support */
.support-box {
  top: 2rem;
  position: relative;
  bottom: 0;
  text-align: center;
  display: block;
}
.b-btn {
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.b-btn.paypal i {
  color: blue;
}
.b-btn:hover {
  text-decoration: none;
  font-weight: bold;
}
.b-btn i {
  font-size: 20px;
  color: yellow;
  margin-top: 2rem;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

/* 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;background-image: linear-gradient(to top, #09203f, #102d50, #163a61, #1b4873, #1f5785);

}

::selection {

color: #fff;

background: #17a2b8;

}

h1{

color:#fff;

border-bottom: 2px solid #fff;

border-top: 2px solid #fff;

padding-bottom: 5px;

}

.wrapper {

width: 400px;

background: #fff;

border-radius: 10px;

padding: 20px 25px 40px;

box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);

box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;

}

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: #1F5785;

}

.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: #1F5785;

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: #1F5785;

pointer-events: auto;

-moz-appearance: none;

box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);

}

/* Support */

.support-box {

top: 2rem;

position: relative;

bottom: 0;

text-align: center;

display: block;

}

.b-btn {

color: white;

text-decoration: none;

font-weight: bold;

}

.b-btn.paypal i {

color: blue;

}

.b-btn:hover {

text-decoration: none;

font-weight: bold;

}

.b-btn i {

font-size: 20px;

color: yellow;

margin-top: 2rem;

}

JS Source Code:

<script>
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 + "%";
    }
  });
});


</script>

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 + "%";

}

});

</script>

Download source code:

If you don’t want to connect the files of Html and CSS with each other. Then you have a simple solution. Download the source code file of the price range slider for free from the below button.

Conclusion:

We have gone through a lot of things related to this slider. This slider is applicable to services or eCommerce websites for a better experience for the users. It reduces the efforts of the users and helps the users to filter the better product for him/her. You can convert this slider into the size of products, the weight of products,s and much more sliders for the filter.

Your task: By using this code you can adjust the minimum and maximum price of the products. Now your task is to fix the min price at zero. Then the max value should be changeable with the help of a slider. The slider point should not move from left to right for increasing min price.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download