Skip to content
PropDefaultType
as
'div'
AsTag | Component

The element or component this component should render as. Can be overwritten by asChild.

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

defaultValue
[0]
number[]

The value of the slider when initially rendered. Use when you do not need to control the state of the slider.

dir
'ltr' | 'rtl'

The reading direction of the combobox when applicable.
If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.

disabled
false
boolean

When true, prevents the user from interacting with the slider.

inverted
false
boolean

Whether the slider is visually inverted.

max
100
number

The maximum value for the range.

min
0
number

The minimum value for the range.

minStepsBetweenThumbs
0
number

The minimum permitted steps between multiple thumbs.

modelValue
number[]

The controlled value of the slider. Can be bind as v-model.

name
string
orientation
'horizontal'
'vertical' | 'horizontal'

The orientation of the slider.

step
1
number

The stepping interval.

EmitPayload
update:modelValue
[payload: number[]]

Event handler called when the slider value changes

valueCommit
[payload: number[]]

Event handler called when the value changes at the end of an interaction.

Useful when you only need to capture a final value e.g. to update a backend service.

Slots (default)Payload
modelValue
number[]

Current slider values