Back to Components

Form

Slider

Single-thumb value picker on a continuous range. Native <input type='range'> for full keyboard support — ←/→, Home/End, PageUp/PageDown.

Examples

Volume

Volume: 40
<Slider bind:value={volume} min={0} max={100} />

Fractional step

Opacity: 0.70
<Slider bind:value={opacity} min={0} max={1} step={0.05} />

Small

<Slider size="sm" min={0} max={100} />

Props

PropTypeDefaultDescription
valuenumber0Bindable numeric value.
minnumber0Lower bound of the range.
maxnumber100Upper bound of the range.
stepnumber1Increment per arrow-key press / drag tick.
size'sm' | 'md''md'Track + thumb dimension tier.
...restHTMLInputAttributesSpread onto the underlying range input.

Install

CLI

npx @a3tai/mittsu add slider