Slider · base-ui-svelte

Volume 40

API Reference

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

Groups all parts of the slider. Renders a <div> element.

Props

value SliderValue —

Name: value
Description: Controlled value.
Type: SliderValue | undefined

defaultValue SliderValue —

Name: defaultValue
Description: Uncontrolled initial value.
Type: SliderValue

min number 0

Name: min
Description: The minimum allowed value of the slider. Should not be equal to max.
Type: number
Default: 0

max number 100

Name: max
Description: The maximum allowed value of the slider. Should not be equal to min.
Type: number
Default: 100

step number 1

Name: step
Description: The granularity with which the slider can step through values. (A "discrete" slider.) The min prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
Type: number
Default: 1

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

orientation SliderOrientation 'horizontal'

Name: orientation
Description: The component orientation.
Type: SliderOrientation
Default: 'horizontal'

name string —

Name: name
Description: Identifies the field when a form is submitted.
Type: string | undefined

format Intl.NumberFormatOptions —

Name: format
Description: Options to format the value.
Type: Intl.NumberFormatOptions | undefined

locale Intl.LocalesArgument —

Name: locale
Description: The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale.
Type: Intl.LocalesArgument | undefined

onValueChange function —

Name: onValueChange
Description: Event handler called when the value changes.
Type: ((value: SliderValue, event: Event) => void) | undefined

onValueCommitted function —

Name: onValueCommitted
Description: Called when the value is committed (pointer up / key up).
Type: ((value: SliderValue, event: Event) => void) | undefined

largeStep number 10

Name: largeStep
Description: Step used with Page Up/Down.
Type: number
Default: 10

minStepsBetweenValues number 0

Name: minStepsBetweenValues
Description: Minimum steps between adjacent thumbs in a range.
Type: number
Default: 0

thumbAlignment 'center' | 'edge' | 'edge-client-only' 'center'

Name: thumbAlignment
Description: How thumbs align to the control edge.
Type: 'center' | 'edge' | 'edge-client-only'
Default: 'center'

thumbCollisionBehavior 'push' | 'swap' | 'none' 'none'

Name: thumbCollisionBehavior
Description: Behavior when thumbs collide.
Type: 'push' | 'swap' | 'none'
Default: 'none'

form string —

Name: form
Description: Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form.
Type: string | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the slider is disabled.
`data-orientation`	Indicates the orientation of the slider.
`data-thumb-alignment`	Present on the element when applicable.

Slider.Control

The clickable, interactive part of the slider. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the slider is disabled.
`data-orientation`	Indicates the orientation of the slider.

Slider.Indicator

Visualizes the current value of the slider. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the slider is disabled.
`data-orientation`	Indicates the orientation of the slider.

Slider.Label

An accessible label that is automatically associated with the slider thumbs. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the part is disabled.

Slider.Thumb

The draggable part of the slider at the tip of the indicator. Renders a <div> element and a nested <input type="range">.

Props

index number —

Name: index
Description: Index into the value array for range sliders (recommended for SSR).
Type: number | undefined

getAriaLabel function —

Name: getAriaLabel
Description: A function which returns a string value for the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the input.
Type: ((index: number) => string) | undefined

getAriaValueText function —

Name: getAriaValueText
Description: A function which returns a string value for the [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the input. This is important for screen reader users.
Type: ((formattedValue: string, value: number, index: number) => string) | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the slider is disabled.
`data-index`	Indicates the index of the thumb in range sliders.
`data-orientation`	Indicates the orientation of the slider.

Slider.Track

Contains the slider indicator and represents the entire range of the slider. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the slider is disabled.
`data-orientation`	Indicates the orientation of the slider.

Slider.Value

Displays the current value of the slider as text. Renders an <output> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[formattedValue: string, value: SliderValue]>

Data attributes

Attribute	Description
`data-disabled`	Present when the slider is disabled.