Component Anatomy

Theming

The same component with different presets and theme tokens — hover each panel to compare. Full guide inRendering customization.

preset="default" (zero config)

40
Rootroot

The component wrapper.

Tracktrack

The rail the thumb travels along.

Rangerange

The filled portion of the track.

Thumbthumb

The draggable handle.

Outputoutput

Live value readout.

preset="minimal"

40
Rootroot

The component wrapper.

Tracktrack

The rail the thumb travels along.

Rangerange

The filled portion of the track.

Thumbthumb

The draggable handle.

Outputoutput

Live value readout.

preset="contrast"

40
Rootroot

The component wrapper.

Tracktrack

The rail the thumb travels along.

Rangerange

The filled portion of the track.

Thumbthumb

The draggable handle.

Outputoutput

Live value readout.

preset="blueprint"

40
Rootroot

The component wrapper.

Tracktrack

The rail the thumb travels along.

Rangerange

The filled portion of the track.

Thumbthumb

The draggable handle.

Outputoutput

Live value readout.

theme={{ accent: "#0d9488", overlayRadius: 8 }}

40
Rootroot

The component wrapper.

Tracktrack

The rail the thumb travels along.

Rangerange

The filled portion of the track.

Thumbthumb

The draggable handle.

Outputoutput

Live value readout.

overlayLabel={false} — quiet mode

40
Rootroot

The component wrapper.

Tracktrack

The rail the thumb travels along.

Rangerange

The filled portion of the track.

Thumbthumb

The draggable handle.

Outputoutput

Live value readout.