Slider

Continuous numeric ranges via pointer or keyboard.

Slider

Slider maps pointer and keyboard interaction to a continuous numeric range. Set min, max, and an initial value. The onChange callback receives updates as the thumb moves.

<slider min={0} max={100} value={volume()} onChange={(next) => setVolume(next)} />

Use the step prop to snap values to discrete increments and specify orientation (vertical or horizontal) via orientation.

<slider min={0} max={1} value={gain()} step={0.1} orientation="vertical" onChange={(n) => setGain(n)} />

Sliders work well as “live controls” in dashboards. Pair them with a readout and keep the slider focused so arrow keys adjust it in small increments, while PageUp/PageDown can apply larger jumps.

Props

Prop	Type	Notes
`min`	`number`	Lower bound (inclusive).
`max`	`number`	Upper bound (inclusive).
`value`	`number`	Controlled value. Keep it in state/store.
`step`	`number`	Snaps to increments (useful for gain/volume, percentages).
`onChange`	`(value) => void`	Called on drag/keyboard updates.