Building a responsive pricing slider with HTML, CSS, and JavaScript

In today's fast-paced digital world, where almost everything is available online, a website is considered the most essential aspect of any business. A well-designed website with responsive features is critical in ensuring the success of any online business. One of the most important aspects of an online business is pricing. Pricing can make or break a business, and having a responsive pricing slider is a great way to attract customers and make it easier for them to make a purchase decision. In this blog, we will take you through the process of building a responsive pricing slider using HTML, CSS, and JavaScript.

Setting up the HTML structure

The first step in building a responsive pricing slider is to set up the HTML structure. The HTML structure should be simple and easy to understand. We will create a div container to hold our pricing slider, and within that div, we will create two more divs, one for the pricing range and one for the slider. Here is an example of the HTML structure:

<div class="pricing-container">
  <div class="pricing-range">
    <span class="pricing-min">Min</span>
    <input type="range" min="0" max="100" value="50" class="pricing-slider">
    <span class="pricing-max">Max</span>
  </div>
  <div class="pricing-value">
    <span class="pricing-value-min">$0</span>
    <span class="pricing-value-max">$100</span>
  </div>
</div>

As you can see, we have used the div container with the class name "pricing-container" to hold the pricing slider. Within that div, we have created two more divs, one with the class name "pricing-range" to hold the slider, and one with the class name "pricing-value" to display the selected pricing range. We have also added three span elements to display the minimum and maximum pricing range.

Styling the Pricing Slider using CSS

The next step is to style the pricing slider using CSS. In this step, we will add some CSS code to make the slider look more attractive and visually appealing. Here is an example of the CSS code:

.pricing-container {
  margin: 50px auto;
  width: 80%;
}

.pricing-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.pricing-slider {
  width: 100%;
  height: 10px;
  -webkit-appearance: none;
  background-color: #e4e4e4;
  outline: none;
  border-radius: 5px;
  transition: .2s;
}

.pricing-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #4CAF50;
  cursor: pointer;
}

.pricing-value {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}

.pricing-value-min, .pricing-value-max {
  font-weight: bold;
}

In this CSS code, we have used the ".pricing-container" class to set the margin and width of the container. The ".pricing-range" class is used to display the slider and the minimum and maximum values. We have used the ".pricing-slider" class to style the slider, including setting its width, height, background color, and border radius. We have also added a transition effect to make it look smoother.

The ".pricing-slider::-webkit-slider-thumb" class is used to style the slider's thumb or handle. In this class, we have set the appearance to "none" to remove the default appearance of the slider thumb. We have also set the width, height, border radius, and background color to make it look more appealing. Finally, we have used the ".pricing-value" class to style the minimum and maximum values of the pricing range.

Adding JavaScript for Interactivity

The final step is to add JavaScript code to make the pricing slider interactive. We will use JavaScript to update the pricing range values and display them in the "pricing-value" div as the slider moves. Here is an example of the JavaScript code:

const slider = document.querySelector(".pricing-slider");
const minValue = document.querySelector(".pricing-value-min");
const maxValue = document.querySelector(".pricing-value-max");

slider.addEventListener("input", () => {
  let value = slider.value;
  let min = slider.min;
  let max = slider.max;
  let percent = ((value - min) / (max - min)) * 100;
  minValue.textContent = `$${min}`;
  maxValue.textContent = `$${max}`;
  let thumb = document.querySelector(".pricing-slider::-webkit-slider-thumb");
  thumb.style.left = percent + "%";
});

In this JavaScript code, we have used the querySelector() method to select the pricing slider and the minimum and maximum pricing range values. We have also used the addEventListener() method to listen for any input event on the slider.

When the slider moves, the event listener function is triggered. In this function, we calculate the current value of the slider, the minimum and maximum values, and the percentage of the slider that has been moved. We then update the minimum and maximum pricing range values in the "pricing-value" div and set the position of the slider thumb based on the percentage of the slider that has been moved.

Conclusion

In this blog, we have taken you through the process of building a responsive pricing slider using HTML, CSS, and JavaScript. By following these steps, you can create a visually appealing and interactive pricing slider that will attract customers and make it easier for them to make a purchase decision. Remember, it's essential to keep your pricing slider simple and easy to understand, so your customers can quickly identify the pricing range they are interested in. We hope this blog has been helpful in guiding you through the process of building a responsive pricing slider, and we wish you all the best in creating a successful online business!