Slider

A track with one handle for a single value, or two for a range. Drag a handle, or focus it and use the arrow keys; Home and End go to the ends. Each handle needs a name: pass one per handle in thumbLabels. onValueCommit fires once the handle is let go, for work that should not run on every step. Built on the bits-ui Slider.

Single value

Drag the handle, or focus it and use the arrow keys; Home and End go to the ends. Every handle needs a name in thumbLabels.

Volume: 40

Range

type="multiple" with two values gives two handles. bind:value follows every step; onValueCommit fires once a handle is let go, for work that shouldn't run on each step, such as a fetch.

Moving: $20 – $80 · Committed: $20 – $80

<div class="w-full max-w-sm space-y-3">
	<Slider
		type="multiple"
		bind:value={range}
		min={0}
		max={200}
		step={5}
		thumbLabels={['Minimum price', 'Maximum price']}
		onValueCommit={(next) => (committed = next)}
	/>
	<p class="text-muted text-xs tabular-nums">
		Moving: ${range[0]} – ${range[1]} · Committed: ${committed[0]} – ${committed[1]}
	</p>
</div>

Disabled

disabled dims the slider and takes it out of the tab order.

API

Prop	Type	Default	Description
`type`	`'single'\|'multiple'`	`'single'`	One handle, or one per value in `value`.
`value` bindable	`number\|number[]`		The value, or the values with `type="multiple"`. Two-way bindable via `bind:value`.
`thumbLabels` required	`string[]`		Accessible name of each handle, in order, such as `['Minimum price', 'Maximum price']`.
`min`	`number`		Lowest value (forwarded via `...rest`).
`max`	`number`		Highest value (forwarded via `...rest`).
`step`	`number`		Distance between values (forwarded via `...rest`).
`onValueCommit`	`(value: number\|number[]) => void`		Called once a handle is let go, or a key step lands (forwarded via `...rest`).
`disabled`	`boolean`		Disables the slider (forwarded via `...rest`).
`class`	`string`		Additional Tailwind classes merged onto the root.