Slider

Granular control over numerical ranges and thresholds.

Preview & Interactive Laboratory

System Capacity85%

Usage & Implementation

<Slider defaultValue={[50]} max={100} step={1} className="w-full" />
React / Tailwind

Granular Customization

1

Slider Track

The background bar.

className={`className='[&>span]:bg-muted'`}
2

Active Range

The filled area of the track.

className={`className='[&_[data-slot=slider-range]]:bg-primary'`}
3

Slider Thumb

The draggable circular handle.

className={`className='[&_[data-slot=slider-thumb]]:border-primary'`}