Slider
A track with a draggable handle for picking a number or a range.
<template> <Slider v-model="amount" :min="50" :max="10000" :step="50" /></template>Props
| Name | Type | Default |
|---|---|---|
| modelValue | number | number[] | - |
| min | number | 0 (USlider's own default) |
| max | number | 100 (USlider's own default) |
| step | number | 1 (USlider's own default) |
| disabled | boolean | false |
| tooltip | boolean | TooltipProps | false |
| ...props | USlider props (orientation, color, size, inverted, minStepsBetweenThumbs, ...) | - |
Guidelines
Do
- Use for selecting a numeric value (or range) from a bounded scale - e.g. a credit amount, a percentage, a price range.
- Pair with a visible numeric input or label when the exact value matters - the slider alone doesn't show the current value unless
tooltipis enabled.
Don't
- Don't use for a small, fixed set of discrete options - use
RadioGrouporSelectinstead. - Don't rely on the slider as the only way to set a precise value if users are likely to need exact numbers - pair it with an input.