Drag the slider within a fixed range.


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.



You can custom tooltip placement.

Range selection

Selecting a range of values is supported.

Vertical mode

Show marks


NameDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuenumber0
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 modestringlarge / default / smalldefault
input-sizesize of the input box, when set size, the default is the value of sizestringlarge / default / smalldefault
show-stopswhether to display breakpointsbooleanfalse
show-tooltipwhether to display tooltip valuebooleantrue
format-tooltipformat to display tooltip valuefunction(value)
rangewhether to select a rangebooleanfalse
verticalvertical modebooleanfalse
heightSlider height, required in vertical modestring
labellabel for screen readerstring
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(value)
debouncedebounce delay when typing, in milliseconds, works when show-input is truenumber300
tooltip-classcustom class name for the tooltipstring
placementposition of Tooltipstringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endtop
marksmarks, type of key must be number and must in closed interval [min, max], each mark can custom styleobject
validate-eventwhether to trigger form validationboolean-true


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