Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also
accepted unless noted.
Slider.Root
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
value | SliderValue | undefined | — | Controlled value. |
defaultValue | SliderValue | — | Uncontrolled initial value. |
min | number | — | — |
max | number | — | — |
step | number | — | — |
disabled | boolean | false | Whether the control ignores user interaction. |
orientation | SliderOrientation | 'horizontal' | — |
name | string | undefined | — | — |
format | Intl.NumberFormatOptions | undefined | — | — |
locale | Intl.LocalesArgument | undefined | — | — |
onValueChange | ((value: SliderValue, event: Event) => void) | undefined | — | Event handler called when the value changes. |
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-disabled | Present when the part is disabled. |
data-orientation | The orientation of the component. |
Slider.Control
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-disabled | Present when the part is disabled. |
data-orientation | The orientation of the component. |
Slider.Indicator
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-disabled | Present when the part is disabled. |
data-orientation | The orientation of the component. |
Slider.Label
Extends span HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-disabled | Present when the part is disabled. |
Slider.Thumb
Extends span HTML attributes.
| Property | Type | Default | Description |
|---|
index | number | undefined | — | Index into the value array for range sliders (recommended for SSR). |
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-disabled | Present when the part is disabled. |
data-index | Index of the item within a collection. |
data-orientation | The orientation of the component. |
Slider.Track
Extends div HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-disabled | Present when the part is disabled. |
data-orientation | The orientation of the component. |
Slider.Value
Extends span HTML attributes.
| Property | Type | Default | Description |
|---|
children | Snippet<[formattedValue: string, value: SliderValue]> | — | Content rendered inside the part. |
| Data attribute | Description |
|---|
data-disabled | Present when the part is disabled. |