Slider

Range input built on the native platform control — arrows, Home/End, PageUp/PageDown, form submission and screen-reader semantics all come for free. The library adds the themed track, filled progress, marks and value display.

Snippet

import { Slider } from '@creo-team/buzz-ui/client'

// Controlled
<Slider label="Volume" value={volume} onChange={setVolume} formatValue={v => `${v}%`} />

// Uncontrolled
<Slider label="Opacity" defaultValue={40} />

Snippet

<Slider
	label="Quality"
	min={0} max={100} step={25} defaultValue={50}
	marks={[
		{ value: 0, label: 'Low' },
		{ value: 50, label: 'Medium' },
		{ value: 100, label: 'High' },
	]}
/>

Snippet

// onChange fires continuously while dragging;
// onChangeEnd fires once when the user releases — ideal for expensive updates.
<Slider
	label="Price range"
	onChange={setPreview}
	onChangeEnd={value => refetchResults(value)}
/>

Snippet

// Posts like any native input — works with server actions.
<form action={updateSettings}>
	<Slider name="volume" label="Volume" defaultValue={50} />
	<Button type="submit">Save</Button>
</form>

Slider

Basic

Steps and marks

Sizes and commit events

Forms