Slider

Root · Label · Thumb · ValueText · Track · Range · Control · MarkerGroup · Marker · DraggingIndicator

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#DraggingIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#MarkerGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#Marker

Prop	Type	Default	Description
`value`	`number`		—

#Range

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the part-size ladder for the thumb seal.
`aria-label`	`string[]`		The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`	`string[]`		The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`defaultValue`	`number[]`		The initial value of the slider when rendered. Use when you don't need to control the value of the slider.
`dir`	`'ltr' \| 'rtl'`	`"ltr"`	The document's text/writing direction.
`disabled`	`boolean`		Whether the slider is disabled
`form`	`string`		The associate form of the underlying input element.
`getAriaValueText`	`(details: slider.ValueTextDetails) => string`		Function that returns a human readable value for the slider thumb
`getRootNode`	`() => ShadowRoot \| Document \| Node`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; thumb(index: number): string; hiddenInput(index: number): string; control: string; track: string; range: string; label: string; valueText: string; marker(index: number): string; }>`		The ids of the elements in the slider. Useful for composition.
`invalid`	`boolean`		Whether the slider is invalid
`largeStep`	`number`	`10 * step`	The amount to increment or decrement the value by when the shift key is held, or the page up/down keys are pressed
`max`	`number`	`100`	The maximum value of the slider
`min`	`number`	`0`	The minimum value of the slider
`minStepsBetweenThumbs`	`number`	`0`	The minimum permitted steps between multiple thumbs.
`modelValue`	`number[]`		The v-model value of the slider
`name`	`string`		The name associated with each slider thumb (when used in a form)
`orientation`	`'vertical' \| 'horizontal'`	`"horizontal"`	The orientation of the slider
`origin`	`'start' \| 'center'`	`"start"`	The origin of the slider range - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative)
`readOnly`	`boolean`		Whether the slider is read-only
`step`	`number`	`1`	The step value of the slider
`thumbAlignment`	`'center' \| 'contain'`	`"contain"`	The alignment of the slider thumb relative to the track - `center`: the thumb will extend beyond the bounds of the slider track. - `contain`: the thumb will be contained within the bounds of the track.
`thumbCollisionBehavior`	`'none' \| 'push' \| 'swap'`	`"none"`	How thumbs behave when they collide during pointer interactions - `none`: Thumbs cannot move past each other - `push`: Thumbs push each other - `swap`: Thumbs swap places
`thumbSize`	`{ width: number; height: number; }`		The slider thumbs dimensions

Event	Payload
`focusChange`	`details: FocusChangeDetails`
`valueChange`	`details: ValueChangeDetails`
`update:modelValue`	`value: number[]`
`valueChangeEnd`	`details: ValueChangeDetails`

#Thumb

Prop	Type	Default	Description
`index`	`number`		—
`name`	`string \| undefined`		—

#Track

A styled part — no props of its own; it takes the anatomy's shared styling.

#ValueText

A styled part — no props of its own; it takes the anatomy's shared styling.