Slider

A more versatile and better looking alternative to a range input.

Default Component

<slider v-model="slider1" />

Result

10

Disabled Slider

<slider v-model="slider0" :disabled="true" />

Result

30

Component With Range Limits

<slider v-model="slider2" :min="-20" :max="20" />

Result

10

Slider With Two Or More Handles

When the bound modelValue is an array a handle will be added for each array item.

<slider v-model="slider3" :min="-50" :max="50" />

Result

[ 10, 20 ]

Result

[ -10, 0, 10 ]

A Vertical Slider (With Two Handles)

When the bound modelValue is an array a handle will be added for each array item.

<slider v-model="slider4" :min="-50" :max="50" :vertical="true"/>

Result

[ 10, 20 ]

Tooltips

Tooltips are shown above their corresponding handles with horizontal sliders and to the left with vertical sliders. In case the tooltip is too close to the top or left viewport border they are moved below or to the right of the handle.

Display the tooltip permanently.

<slider v-model="slider5" :min="-50" :max="50" show-tooltip="always" />

Result

[ -20, 20 ]

Display the tooltip only when the handle is focused.

<slider v-model="slider6" :min="-50" :max="50" show-tooltip="focus" />

Result

[ -20, 20 ]

Use a callback function to format the tooltip label.

<slider
    v-model="slider7"
    :min="-5000"
    :max="5000"
    show-tooltip="always"
    :format-tooltip="v => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(v)"
/>

Result

[ -1000, 1000 ]

Use a slot to customize the tooltip label.

<slider
    v-model="slider8"
    :min="-50"
    :max="50"
    show-tooltip="always"
>
    <template #tooltip="{ value, ndx }">Handle {{ ndx + 1}}: {{ value }}</template>
</slider>

Result

[ -20, 20 ]

Properties

Name	Type	Default	Description
modelValue	Number, Number[]		If an array of numbers is bound a handle is shown for each array entry
min	Number		The left (or bottom) boundary of the slider
max	Number		The right (or top) boundary of the slider
disabled	Boolean		Disables the slider
vertical	Boolean		Rotates the slider by 90 degree counterclockwise (min value at bottom, max value at top)
showTooltip	String	never	Valid values are never, always and focus
formatTooltip	Function	v => String(v)	Allows formatting the tooltip label with a callback function

Events

Name	Arguments	Description
update:modelValue	value - can be a single number or an array	Emitted when handles are moved by user interaction
dragStart		Emitted when a handle is grabbed by mouse or touch
dragStop		Emitted when a handle is released

Slots

Name	Scoped	Description
tooltip		Bound tooltip properties are value and ndx, the array index when modelValue is an array

Keys

Key	Action
tab	Each handle can be focused
left, down	Decreases bound value of selected handle by 1
right, up	Increases bound value of selected handle by 1
home	Sets bound value of selected handle to min
end	Sets bound value of selected handle to max
pageDown	Decreases bound value of selected handle by 1/10 of min-max range
pageUp	Increases bound value of selected handle by 1/10 of min-max range