Drag the slider within a fixed range.

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.


Range selection

Selecting a range of values is supported.

Vertical mode

Show marks


AttributeDescriptionTypeAccepted 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 sliderstringlarge / 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
marksmarks, type of key must be number and must in closed interval [min, max], each mark can custom styleobject


Event NameDescriptionParameters
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