Skip to content

Range Sliders

Single and dual-handle range inputs.

2 components

Custom Range Slider – Pure CSS range sliders preview

Custom Range Slider

Styled range input with a gradient fill, ring thumb and a live value bubble that follows the handle, in pure CSS and a few lines of vanilla JS.

Pure CSS Range Sliders
Dual Range Price Slider – Tailwind CSS range sliders preview

Dual Range Price Slider

Tailwind CSS min/max price slider with two handles, synced number inputs and a live histogram that counts products in the selected range.

Tailwind CSS Range Sliders

What is a range slider?

A range slider lets users pick a value, or a range of values, by dragging a handle along a track. Single-handle sliders suit volume, opacity or a maximum distance. Dual-handle sliders let users set a minimum and maximum, which is common for price filters in online stores, budget selectors and date or age ranges.

When to use a range slider

  • When the exact value matters less than a quick, visual adjustment.
  • For filters with a known minimum and maximum, like price or size.
  • When users benefit from seeing the value change live.
  • Pair the slider with number inputs when precise values are important.

Best practices

  • Start from the native <input type="range">; it is keyboard accessible and works with assistive technology.
  • Give every slider a visible label and display the current value next to it, updated as the handle moves.
  • For values that need context, set aria-valuetext, for example "50 euros" instead of "50".
  • Dual-handle sliders are typically two overlapping range inputs; make sure each has its own label such as "Minimum price" and "Maximum price" and that they cannot cross.
  • Make the thumb large enough to grab on touch screens, at least 24 pixels, and keep the track tall enough to hit.
  • Style the thumb and track with ::-webkit-slider-thumb and ::-moz-range-thumb, and keep a visible focus style.
  • Use step values that make sense for the data, and show tick marks for important points if needed.

Framework versions

This category includes custom range slider CSS, sliders with value bubbles, dual-handle price filters and stepped sliders. Bootstrap 6 versions use theme-* colour roles for the filled track. Bootstrap 5 versions start from .form-range and add a little JavaScript for value labels and dual handles, Tailwind CSS versions combine utilities with small custom CSS for the thumb, and pure CSS versions style the native input directly. Preview them live, check the code tabs, and copy the HTML, CSS and JS into your filters or settings.