Slider

Drag the slider within a fixed range.

TIP

This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Basic usage

The current value is displayed when the slider is being dragged.

Discrete values

The options can be discrete.

Slider with input box

Set value via a input box.

Sizes

Placement

You can custom tooltip placement.

Range selection

Selecting a range of values is supported.

Vertical mode

Show marks

API

Attributes

NameDescriptionTypeDefault
model-value / v-modelbinding valuenumber / object0
minminimum valuenumber0
maxmaximum valuenumber100
disabledwhether Slider is disabledbooleanfalse
stepstep sizenumber1
show-inputwhether to display an input box, works when range is falsebooleanfalse
show-input-controlswhether to display control buttons when show-input is truebooleantrue
sizesize of the slider wrapper, will not work in vertical modeenumdefault
input-sizesize of the input box, when set size, the default is the value of sizeenumdefault
show-stopswhether to display breakpointsbooleanfalse
show-tooltipwhether to display tooltip valuebooleantrue
format-tooltipformat to display tooltip valueFunction
rangewhether to select a rangebooleanfalse
verticalvertical modebooleanfalse
heightslider height, required in vertical modestring
label a11y deprecatednative aria-label attributestring
aria-label a11y 2.7.2native aria-label attributestring
range-start-labelwhen range is true, screen reader label for the start of the rangestring
range-end-labelwhen range is true, screen reader label for the end of the rangestring
format-value-textformat to display the aria-valuenow attribute for screen readersFunction
debouncedebounce delay when typing, in milliseconds, works when show-input is truenumber300
tooltip-classcustom class name for the tooltipstring
placementposition of Tooltipenumtop
marksmarks, type of key must be number and must in closed interval [min, max], each mark can custom styleobject
validate-eventwhether to trigger form validationbooleantrue

Events

NameDescriptionType
changetriggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)Function
inputtriggers when the data changes (It'll be emitted in real time during sliding)Function

Type Declarations

Show declarations
type SliderMarks = Record<number, string | { style: CSSProperties; label: any }>
type Arrayable<T> = T | T[]

Source

ComponentDocs

Contributors