Create Price Range Slider in HTML CSS and JavaScript

In this blog post, we are going to learn how to create a simple price range slider using HTML, CSS, and Javascript. The price range slider input will be useful when the user wants to select a minimum and maximum price within a given range.

As you can see in the demo video, we have our price range slider input and we are also displaying the user-selected minimum and maximum prices. We can use these kinds of price range slider inputs in e-commerce projects to filter products based on the user-selected price range.

Steps to Create Custom Price Range Slider in HTML CSS and Javascript

Write HTML Code for Price Range Slider
Style Price Range Slider using CSS
Write Javascript Code to Make Slider Work

Write HTML Code for Price Range Slider

Firstly let’s create our index.html file and write HTML code for our price range slider.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="style.css" />
    <title>Price Range Slider</title>
  </head>

  <body>
    <div class="card">
      <h4>Price Range Slider</h4>

      <div class="price-content">
        <div>
          <label>Min</label>
          <p id="min-value">$50</p>
        </div>

        <div>
          <label>Max</label>
          <p id="max-value">$500</p>
        </div>
      </div>

        <div class="range-slider">
          <input type="range" class="min-price" value="100" min="10" max="500" step="10">
          <input type="range" class="max-price" value="250" min="10" max="500" step="10">
        </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

In the above HTML code, we have two <p> tags to display the minimum and maximum price selected by the user. And we have added two input elements of the type range. One range slider to select the minimum price and another range slider to select the maximum price.

After adding this code our UI looks something like this.

Style Price Range Slider using CSS

Now, let’s add some styles to our price range slider using CSS. add the following code inside the styles.css file.

styles.css

* {
  margin: 0px;
  padding: 0px;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #36b37e;
}

.card {
  width: 400px;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
}

h4 {
  color: #000;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
}

.price-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 30px;
}

label {
  font-size: 12px;
  font-weight: 500;
}

p {
  font-size: 16px;
  font-weight: 600;
}

.range-slider {
  width: 400px;
  position: relative;
  margin: 15px 0 30px 0;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent; 
  position: absolute;
  left: 0;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #36b37e;
  cursor: pointer;
  margin-top: -5px;
  position: relative;
  z-index: 1;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: #e8e8e8;
  border-radius: 3px;
  border: none;
}

Using CSS we have placed the two range slider inputs in a stack using the position: absolute property. And we have brought the slider thumb to the top using z-index: 1.

create price range slider in html css javaScript output

Write Javascript Code to Make Slider Work

Inside the script.js file, we have written the javascript code for our price range slider element.

script.js

let minValue = document.getElementById("min-value");
let maxValue = document.getElementById("max-value");

function validateRange(minPrice, maxPrice) {
  if (minPrice > maxPrice) {

    // Swap to Values
    let tempValue = maxPrice;
    maxPrice = minPrice;
    minPrice = tempValue;
  }

  minValue.innerHTML = "$" + minPrice;
  maxValue.innerHTML = "$" + maxPrice;
}

const inputElements = document.querySelectorAll("input");

inputElements.forEach((element) => {
  element.addEventListener("change", (e) => {
    let minPrice = parseInt(inputElements[0].value);
    let maxPrice = parseInt(inputElements[1].value);

    validateRange(minPrice, maxPrice);
  });
});

validateRange(inputElements[0].value, inputElements[1].value);

In the above code, we have added an event listener to our range input elements. Whenever the input value changes we are calling validateRange() function.

The validateRange function takes minPrice and maxPrice as parameters. It checks whether minPrice is greater than maxPrice if true we swap the values of minPrice and maxPrice. And we display the user-selected values in the UI.

Github Repository

Also check out:

Conclusion

In this short tutorial, we have learned how to create a simple price range slider using HTML CSS, and Javascript. Hope it was useful.

1 thought on “Create Price Range Slider in HTML CSS and JavaScript”

Olga November 28, 2022 at 4:29 pm


Hi. I repeated everything you did and everything works with your data, but not with mine, I don’t understand what’s the matter. Please help
https://jsfiddle.net/5Lw8dvg9/3/