Slider

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

Attributes

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
input-sizesize of the input boxstringlarge / medium / small / minismall
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
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

Events

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