Range Sliders – 8 Free CSS, Bootstrap & Tailwind Sets
Range Sliders is a pack of eight sets of styled range sliders, designed and maintained in-house by uiCookies. Every slider is a real input type="range" restyled through the WebKit and Firefox pseudo-elements, and every set comes in three versions that look the same: plain CSS, Bootstrap 5 on top of .form-range, and Tailwind CSS 4 with arbitrary variants for the thumb and track. The sets run from plain sliders and tick marks to two-thumb price filters, volume and brightness controls, vertical equalisers, step pickers, a dark set and a set that reads the value in CSS alone.
A good range slider starts as a real range input, so keyboard steps, touch dragging and form submission keep working after the restyle. It has a visible label and shows its value next to it, with the unit, and puts the same formatted text into aria-valuetext so a screen reader says $1,850 rather than 1850. The fill ends at the centre of the thumb at both ends of the track, which means offsetting it by half a thumb, the unfilled track stays at 3:1 against the page, and focus is drawn somewhere people can see it: on the thumb, or around the input when the thumb is clipped.
