Slider
A draggable input for selecting a numeric value within a defined range. Supports stepped increments, keyboard navigation, and a range mode for selecting a lower and upper bound simultaneously.
By default, slider rounds output values to integers.
Props
| Name | Default | Type |
|---|---|---|
min | 0 | number Minimum output value |
max | 100 | number Maximum output value |
steps | — | number Number of equal divisions between min and max |
range | false | boolean Enables range mode with a start and end handle |
round | true | boolean | number Round output values. true rounds to an integer, a number specifies decimal places, false disables rounding |
Models
| Name | Type | Description |
|---|---|---|
modelValue | number | Current value in single mode (v-model) |
start | number | Lower bound of the range in range mode (v-model:start) |
end | number | Upper bound of the range in range mode (v-model:end) |
Examples
Range mode with 10 steps. Both handles snap to step boundaries and cannot cross each other.
20 – 80
Tokens
CSS variable tokens used for global or per-instance manipulation of certain styling.
| Token | Default | Description |
|---|---|---|
--vui-slider-height | 4px | Track height |
--vui-slider-background | var(--color-border) | Track background color |
--vui-slider-indicator | var(--color-accent) | Fill indicator color |
--vui-slider-handle-size | 20px | Handle diameter |
--vui-slider-handle-rounding | var(--border-radius-pill) | Handle border radius |
--vui-slider-handle-color | var(--color-border-strong) | Handle border color |
--vui-slider-step-indicator-width | 2px | Step tick width |
--vui-slider-step-indicator-height | 4px | Step tick height |