Skip to content
Sign in

Range Sliders for React and Tailwind

A slider is great for rough choices and poor for exact ones, so show the value clearly. Good ones have a generous grab area, work with arrow keys and feel right on touch screens. Drag each one quickly to see if it keeps up. Install one with a single command, then connect it to your own settings. Label both ends so the range is clear.

Slider
Slider

About range sliders

Sliders pick a value by dragging a thumb along a track: volume, price ranges, brush sizes, zoom. Range sliders have two thumbs for a minimum and maximum, some show marks and labels along the track, and many pair with a number input for precise entry.

Use a slider when the exact number matters less than the feel of more or less, and pair it with an input when precision matters. Make the thumb large enough to grab, support the arrow keys and Page Up and Down, and show the current value while dragging.

Frequently asked questions

Use an accessible primitive such as Radix or Base UI Slider with two thumbs, or two native range inputs layered on one track. Keep both values in state and stop the thumbs crossing.

Remove the default look with appearance none, then style the track and thumb with the vendor specific pseudo elements for WebKit and Firefox. Fill the track up to the thumb with a background gradient.

Show it in a small label above the thumb that follows it, or beside the slider. Update it on every change, not only when the drag ends.

Use role slider with aria-valuenow, min and max and a label, or the native range input. Arrow keys should step the value and Home and End jump to the limits.

Use a slider for approximate values where seeing the effect matters, like volume. Use a number input when people know the exact value they want, like a price.

Set a step size so the thumb snaps to allowed values and render tick marks or labels at those positions under the track.

They can, if the thumb's touch area is at least about forty pixels and the track isn't too short. Pair them with plus and minus buttons for fine changes.

Explore more