Slider

Pick a value, or a range, by dragging along a track.

Contrast50
Fig. 1 Adjust contrast. Drag the thumb, click the track, or use the arrow keys for small steps.

When to use it

Use Slider when the feel of a value matters more than the exact number: volume, contrast, a price range. Show the current value beside it.

When people need a precise number, give them an Input, alone or next to the slider.

How it behaves

Pass value as an array: one entry renders one thumb, two entries render a range. onValueChange receives the same array.

Give the slider an accessible name with aria-label or aria-labelledby. Arrow keys step, Page Up/Down take larger steps, and Home/End jump to the limits.

Clicking the track moves the nearest thumb. The thumb ring appears on hover and keyboard focus; reduced motion removes its transition.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

slider-example.tsx

The full source is yours to edit once installed:

slider.tsx