Slider
Range input via Radix UI
With Label
Usage
tsx
import { Slider } from '@tryvienna/ui'
<Slider defaultValue="[50]" max="100" step="1" />1
2
3
2
3
Examples
Default
Default
tsx
<Slider defaultValue="[50]" max="100" step="1" />1
With Label
With Label
tsx
<div className="grid gap-4 w-80">
<div className="flex items-center justify-between">
<Label>Volume</Label>
<span className="text-muted-foreground text-sm">75%</span>
</div>
<Slider defaultValue={[75]} max={100} step={1} />
</div>1
2
3
4
5
6
7
2
3
4
5
6
7
Range
Range
tsx
<div className="grid gap-4 w-80">
<div className="flex items-center justify-between">
<Label>Price range</Label>
<span className="text-muted-foreground text-sm">$25 - $75</span>
</div>
<Slider defaultValue={[25, 75]} max={100} step={5} />
</div>1
2
3
4
5
6
7
2
3
4
5
6
7
With Steps
With Steps
tsx
<div className="grid gap-4 w-80">
<div className="flex items-center justify-between">
<Label>Temperature</Label>
<span className="text-muted-foreground text-sm">0.7</span>
</div>
<Slider defaultValue={[7]} max={20} step={1} />
<div className="flex justify-between text-xs text-muted-foreground">
<span>0.0</span>
<span>1.0</span>
<span>2.0</span>
</div>
</div>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Disabled
Disabled
tsx
<Slider defaultValue="[40]" max="100" step="1" disabled="true" />1
Min Max
Min Max
tsx
<div className="grid gap-4 w-80">
<Label>Brightness (20-80%)</Label>
<Slider defaultValue={[50]} min={20} max={80} step={5} />
</div>1
2
3
4
2
3
4
API Reference
Slider
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number[] | undefined | - | |
value | number[] | undefined | - |
Also accepts all props from SliderPrimitive.Root.
Data Attributes
| Component | data-slot |
|---|---|
Slider | "slider" |