Building a Price Range Slider Without JavaScript - A Pure HTML & CSS Approach

Creating an interactive web component such as a price range slider is often seen as a task requiring JavaScript. While JavaScript is powerful, there are occasions where you can achieve functional and interactive components purely using HTML and CSS. In this article, we will walk through how to create a price range slider using only HTML and CSS, and explore the benefits of keeping JavaScript out of the equation in some cases.

What We’ll Be Building

We’ll be creating a price range slider with a maximum price of $5000. The slider will dynamically update the displayed price as the user moves the slider, with the price value appearing next to the slider. This will be done without the use of JavaScript—leveraging only CSS for styling and interactivity.

Here’s the basic HTML and CSS code for our slider

<div class="price-slider-wrapper">
  <label for="price">Max. Price</label>
  <div class="price-slider">
    <input
      class="input-price"
      type="range"
      id="price"
      value="0"
      autocomplete="off"
      max="5000"
      step="50"
      onclick="document.body.style.setProperty('--price', this.value);"
      oninput="document.body.style.setProperty('--price', this.value);"
    />
    <span class="price"></span>
  </div>
</div>

And here’s the corresponding CSS

:root {
  --price: 0;
}

body {
  padding-top: 10%;
}

.price-slider-wrapper {
  margin: 0 auto;
  width: 350px;
}

.price,
.input-price {
  vertical-align: middle;
}

.price {
  margin-left: 0.5rem;
}

.price-slider {
  display: block;
  margin-top: 1rem;
}

.price:before {
  counter-reset: variable var(--price);
  content: counter(variable) "$";
}

How Does It Work?

1. The HTML

We start with a basic structure that includes a label, an input slider, and a span element. The slider input uses the range type, allowing us to easily implement a sliding control.

The input element is of type range, allowing the user to select a value within a range by dragging a slider. The max="5000" attribute defines the upper limit of the price, and the step="50" ensures that the user can only select values in increments of 50.
The value="0" sets the initial value of the slider to 0, which will be updated as the user interacts with it.
The autocomplete="off" attribute prevents browsers from trying to autofill this input field.

2. CSS Custom Properties (Variables)

CSS custom properties (often called CSS variables) are used to store and update the current price. In the :root selector, we define a custom property --price and initialize it to 0.

:root {
  --price: 0;
}

This custom property will dynamically store the value of the price as the user interacts with the slider. By using document.body.style.setProperty('--price', this.value); in the oninput and onclick attributes of the slider, we can update the --price variable whenever the user moves the slider.

3. Displaying the Price

The <span class="price"></span> element is where the current price will be displayed. To display the value of the --price variable, we use the content property of CSS with the ::before pseudo-element. This allows us to show dynamic content in the DOM without needing JavaScript.

.price:before {
  counter-reset: variable var(--price);
  content: counter(variable) "$";
}

In this code, the counter-reset property is used to store the value of —price into a counter, and then the content property is used to display that value. This effectively creates a text-based price display that updates in real-time as the slider moves.

The Benefits of Using Only HTML & CSS

While JavaScript is typically the go-to for creating interactive elements like sliders, there are several advantages to sticking with a pure HTML and CSS solution.

1. Performance Benefits

CSS and HTML are rendered natively by the browser, so they tend to have faster execution times compared to JavaScript. By avoiding JavaScript, especially for something as lightweight as a slider, we can improve load times and reduce the amount of processing required by the browser.

In modern web development, front-end frameworks and libraries (like React or Vue.js) often come with performance overhead. If your project doesn’t need a full-fledged JavaScript solution, sticking to CSS and HTML can result in faster page loads and smoother user interactions. In this case, the slider updates are near-instantaneous because the browser is simply rendering CSS updates, not running JavaScript computations.

2. Lower Dependencies

Not every project needs the complexity of JavaScript frameworks or libraries. Adding JavaScript, especially through third-party libraries, increases the number of dependencies in your project. Each new dependency introduces potential points of failure, security vulnerabilities, and maintenance overhead.

By using only HTML and CSS, you avoid unnecessary dependencies. This makes your project simpler to maintain and ensures that you don’t have to worry about keeping JavaScript libraries updated or compatible with each other.

3. Reduced Code Complexity

JavaScript, while powerful, can sometimes introduce additional complexity to a project. When building interactive components with JavaScript, you often need to handle things like event listeners, state management, and DOM manipulation. For a simple task like updating the displayed value of a price slider, JavaScript might feel like overkill.

With pure HTML and CSS, the logic remains declarative and straightforward. The user’s input directly affects the custom CSS variable, and the display is updated automatically. This makes the code more readable and maintainable.

4. Improved Accessibility

CSS solutions are often more inherently accessible than JavaScript-based solutions. By sticking with native HTML elements like the <input type="range">, you benefit from built-in accessibility features such as keyboard support and screen reader compatibility.

Browsers have well-established accessibility guidelines for native form elements like sliders, but implementing custom sliders with JavaScript may require additional work to ensure that all users (including those with disabilities) can interact with the component. By sticking to native HTML, you’re more likely to meet accessibility standards without any extra effort.

5. Progressive Enhancement

One of the core principles of web development is progressive enhancement. This means building a website or application so that it works well in older browsers or without JavaScript, and then enhancing the experience with additional features for users who have modern browsers and JavaScript enabled.

By implementing the price slider with just HTML and CSS, we ensure that it will work in virtually all environments. Users who have disabled JavaScript, for example, will still be able to use the slider as intended, and it will still look and function as expected.

Limitations of a Pure CSS Solution

Of course, there are situations where JavaScript might still be necessary, depending on your project requirements. For example:

Complex calculations: If you need to perform calculations based on the slider’s value (such as adjusting a total price or applying discounts), you might need to introduce JavaScript to handle the logic.
Dynamic UI elements: If your UI needs to change drastically based on the slider’s position, CSS might not be flexible enough. For example, showing/hiding multiple elements or updating a complex layout based on the slider’s value would be difficult without JavaScript.

That said, if your use case is as simple as displaying a value based on the position of a slider, CSS can more than handle the job!

Conclusion

Building a price range slider without JavaScript is not only possible but also advantageous in many cases. It reduces complexity, avoids unnecessary dependencies, and leverages the inherent performance benefits of native HTML and CSS. While JavaScript is necessary for more advanced interactivity, for simple use cases like this one, a pure CSS solution offers all the functionality you need with minimal overhead.

To see this example in action and experiment with the code, you can visit the live demo on CodePen here.

By following this guide, you now know how to create a basic price range slider using only HTML and CSS. Happy coding, and remember that sometimes less is more—especially when it comes to web development!