shadcn.io is an independent project built on shadcn/ui
Adjustment is on the left. The number and a small Reset button are on the right. The thumb starts at 50, and Reset puts it back there.
Use it for an image or audio tweak people will try and undo. Confirm a wider reset in an Alert Dialog if it wipes more than this slider. In Svelte, Ark UI does not remember the default.
Installation
Anatomy
Usage
<div class="flex w-full max-w-md flex-col gap-2"><div class="flex items-center justify-between"><Label>Adjustment</Label><div class="flex items-center gap-2"><span class="text-muted-foreground text-sm tabular-nums">{value[0]}</span><Button onclick={reset} size="sm" variant="outline">Reset</Button></div></div><Slider aria-label={["Adjustment"]} onValueChange={handleValueChange} value={value} /></div>FAQ
What does Reset do?
It sets the value back to DEFAULT_VALUE, 50, the same constant the state starts from.
How does the readout follow the thumb?
The value lives in state, starting at 50, and goes back to the slider as value. The number next to Reset prints it.
onValueChange receives details.value, the new array.
Should Reset be disabled at the default?
It is always enabled here. Disable it when the value already equals DEFAULT_VALUE if you want to show there's nothing to reset.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
Button
Sets onclick={reset}, size="sm" and variant="outline". The rest is on the Button page.
Slider
Sets aria-label={["Adjustment"]}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.
