Slider

Default

Single thumb, 0-100.

Controlled

Bound to a ref with the value shown as text and a reset button.

Range

Two thumbs for selecting a range.

Two-thumb range

Two-thumb range from an array model value, with tooltips and a live output.

Stepped

Snap to discrete step values.

Wide thumb

Pill-shaped handle wider than it is tall, suited to open/close style controls.

Ruler scrubber

Recessed tick-ruler with a thin glowing indicator and a paired number input, matching design-tool property panels.

Simple

Basic slider with a label.

Disabled

Non-interactive, dimmed state.

Square thumb

Thumb with squared-off corners.

Solid thumb

Filled thumb over a faded track.

Tiny thumb

Slim bar-style thumb.

Reference labels

Static reference labels beneath the track.

Ticks

Tick marks with skipped value labels.

With output

Live value shown beside the label.

With labels

Descriptive labels above the track.

Labels and tooltip

Labels plus a value tooltip on the thumb.

Dual range

Two thumbs selecting a min and max.

Dual range with output

Range with a live min-max output.

Volume

Volume control flanked by icons.

Multiple thumbs

Three thumbs with formatted tooltips.

Temperature

Slider synced with an input and a reset action.

With input

Slider synced with a number input.

Rating with emoji

1-5 rating flanked by emoji.

Rating with tooltip

Rating with a label tooltip and reactive emoji.

Dual range with input

Range bounded by two inputs.

Plus / minus buttons

Stepper buttons alongside the slider.

Price range

Formatted price range with an action button.

Vertical

Vertical orientation.

Vertical with input

Vertical slider synced with an input.

Vertical dual range and tooltip

Vertical range with value tooltips.

Object position

Multiple labelled sliders with a reset-all action.

Price with histogram

Range slider over a price-distribution histogram.

Equalizer

Five vertical bands with pill thumbs and tooltips.

API Reference

Accessibility

Keyboard shortcuts and ARIA behavior.