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.

Sizes

Range selection

Selecting a range of values is supported.

Vertical mode

Show marks

Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value	number	—	0
min	minimum value	number	—	0
max	maximum value	number	—	100
disabled	whether Slider is disabled	boolean	—	false
step	step size	number	—	1
show-input	whether to display an input box, works when `range` is false	boolean	—	false
show-input-controls	whether to display control buttons when `show-input` is true	boolean	—	true
size	size of the slider	string	large / default / small	default
input-size	size of the input box, when set `size`, the default is the value of `size`	string	large / default / small	default
show-stops	whether to display breakpoints	boolean	—	false
show-tooltip	whether to display tooltip value	boolean	—	true
format-tooltip	format to display tooltip value	function(value)	—	—
range	whether to select a range	boolean	—	false
vertical	vertical mode	boolean	—	false
height	Slider height, required in vertical mode	string	—	—
label	label for screen reader	string	—	—
debounce	debounce delay when typing, in milliseconds, works when `show-input` is true	number	—	300
tooltip-class	custom class name for the tooltip	string	—	—
marks	marks， type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style	object	—	—

Events

Event Name	Description	Parameters
change	triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)	value after changing
input	triggers when the data changes (It'll be emitted in real time during sliding)	value after changing

Virtualized Select