shadcn.io is an independent project built on shadcn/ui
Volume is the title. Under it, Current volume: 50%, which follows the thumb. One thumb sits on a track from 0 to 100, stepping by 1.
Use it when people should see the number as they drag. A value they type instead is a Number Input. In Svelte, Ark UI does not set the system volume.
Installation
Anatomy
Usage
<Field class="max-w-md"><FieldTitle>Volume</FieldTitle><FieldDescription>Current volume: <span class="font-medium">{value[0]}%</span></FieldDescription><Slider aria-label={["Volume"]} class="mt-2" max={100} min={0} onValueChange={handleValueChange} step={1} value={value} /></Field>FAQ
How is the volume number stored?
value is an array whose first number starts at 50. The range is 0 to 100 and step is 1. The bounds are min and max.
How does the percentage stay in sync?
FieldDescription prints the first number in value with a percent sign. font-medium marks that number.
Update value from onValueChange.
What names the slider?
FieldTitle is the visible caption, Volume. aria-label on Slider names the control, because FieldTitle is a visual title.
What is the space above the track?
mt-2 on Slider adds space under the description. max-w-md on Field caps the row.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Slider
Sets aria-label={["Volume"]}, max={100}, min={0}, onValueChange={handleValueChange}, step={1} and value={value}. The rest is on the Slider page.
