Slider

Interactive range control with two draggable handles for selecting a value range. Supports plain, labelled, and tooltip variants. Fully keyboard-accessible.

No label

Basic range slider with no value indicators. Drag either handle or use arrow keys to change the selected range.

Label

Value labels appear below each handle, updating live as the handle moves.

0%
25%
25%
75%
50%
100%

Tooltip above

Floating tooltip box positioned above each handle with a downward arrow.

0%
25%
25%
75%
50%
100%

Tooltip below

Floating tooltip box positioned below each handle with an upward arrow.

0%
25%
25%
75%
50%
100%

Custom label format

Use formatLabel to display any unit. Pass min / max / step to control the range and granularity.

$200
$800
18 yrs
65 yrs