Slider

Drag the slider within a fixed range.

Basic usage

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

Customize the initial value of the slider by setting the binding value.

Default value
Customized initial value
Hide Tooltip
Format Tooltip
Disabled

Discrete values

The options can be discrete.

Set step size with the step attribute. You can display breakpoints by setting the show-stops attribute.

Breakpoints not displayed
Breakpoints displayed

Slider with input box

Set value via a input box.

Set the show-input attribute to display an input box on the right.

Sizes

Placement

You can custom tooltip placement.

Range selection

Selecting a range of values is supported.

Setting the range attribute activates range mode, where the binding value is an array made up of two boundary values.

Vertical mode

Setting the vertical attribute to true enables vertical mode. In vertical mode, the height attribute is required.

Show marks

Setting this marks attribute can show mark on slider.

0°C
8°C
37°C
50%

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
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
label a11y deprecatednative aria-label attributestring

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
ts
type SliderMarks = Record<number, string | { style: CSSProperties; label: any }>
type Arrayable<T> = T | T[]

Source

ComponentStyleDocs

Contributors