Slider API

API reference for the Slider components.

Explore these related pages for additional context and usage patterns.

Page	Category
Slider	Forms
createSlider	Forms

Slider.Root

Props

id

string | undefined

Unique identifier (auto-generated if not provided)

Default: useId()

min

number | undefined

Minimum value (default: 0)

Default: 0

max

number | undefined

Maximum value (default: 100)

Default: 100

step

number | undefined

Step increment (default: 1)

Default: 1

disabled

MaybeRefOrGetter<boolean> | undefined

Disables the slider

Default: false

readonly

MaybeRefOrGetter<boolean> | undefined

Readonly — focusable but not editable

orientation

"horizontal" | "vertical" | undefined

Slider orientation

Default: "horizontal"

inverted

boolean | undefined

Flip the percent axis

Default: false

minStepsBetweenThumbs

number | undefined

Minimum steps between adjacent thumbs (default: 0)

Default: 0

crossover

boolean | undefined

Allow thumbs to pass through each other (default: false)

Default: false

name

string | undefined

Form field name — triggers hidden inputs

form

string | undefined

Associate with form by ID

namespace

string | undefined

Namespace for context provision

Default: "v0:slider:root"

modelValue

number | number[] | undefined

Default: []

Events

update:model-value

[value: number | number[]]

start

[value: number | number[]]

end

[value: number | number[]]

Slots

default

SliderRootSlotProps

Slider.HiddenInput

Props

namespace

string | undefined

Namespace for context injection from parent Slider.Root

Default: "v0:slider:root"

index

number | undefined

Thumb index to read value from

Default: 0

Slider.Range

Props

namespace

string | undefined

Namespace for connecting to parent Slider.Root

Default: "v0:slider:root"

Slots

default

SliderRangeSlotProps

Slider.Thumb

Props

namespace

string | undefined

Namespace for connecting to parent Slider.Root

Default: "v0:slider:root"

ariaLabel

string | undefined

Accessible label for this thumb

ariaLabelledby

string | undefined

ID of element labelling this thumb

ariaValuetext

string | undefined

Custom aria-valuetext (for formatted display)

Slots

default

SliderThumbSlotProps

Slider.Track

Props

namespace

string | undefined

Namespace for connecting to parent Slider.Root

Default: "v0:slider:root"

Slots

default

SliderTrackSlotProps