Reka UI logoReka
backdrop
Examples
PropDefaultType
as
'span'
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[] | null

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

name
string

The name of the field. Submitted with its owning form as part of a name/value pair.

orientation
'horizontal'
'vertical' | 'horizontal'

The orientation of the slider.

required
boolean

When true, indicates that the user must set the value before the owning form can be submitted.

step
1
number

The stepping interval.

thumbAlignment
'contain'
'contain' | 'overflow'

The alignment of the slider thumb.

  • contain: thumbs will be contained within the bounds of the track.
  • overflow: thumbs will not be bound by the track. No extra offset will be added.
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[] | null

Current slider values