Slider
Continuous or stepped range input for numeric values. Supports single or multi-thumb selection.
Default
Single thumb, 0-100.
Range
Two thumbs for selecting a range.
Stepped
Snap to discrete step values.
Wide thumb
Pill-shaped handle wider than it is tall, suited to open/close style controls.
Ruler scrubber
Recessed tick-ruler with a thin glowing indicator and a paired number input, matching design-tool property panels.
Simple
Basic slider with a label.
Disabled
Non-interactive, dimmed state.
Square thumb
Thumb with squared-off corners.
Solid thumb
Filled thumb over a faded track.
Tiny thumb
Slim bar-style thumb.
Reference labels
Static reference labels beneath the track.
Ticks
Tick marks with skipped value labels.
With output
Live value shown beside the label.
With labels
Descriptive labels above the track.
Labels and tooltip
Labels plus a value tooltip on the thumb.
Dual range
Two thumbs selecting a min and max.
Dual range with output
Range with a live min-max output.
Volume
Volume control flanked by icons.
Multiple thumbs
Three thumbs with formatted tooltips.
Temperature
Slider synced with an input and a reset action.
With input
Slider synced with a number input.
Rating with emoji
1-5 rating flanked by emoji.
Rating with tooltip
Rating with a label tooltip and reactive emoji.
Dual range with input
Range bounded by two inputs.
Plus / minus buttons
Stepper buttons alongside the slider.
Price range
Formatted price range with an action button.
Vertical
Vertical orientation.
Vertical with input
Vertical slider synced with an input.
Vertical dual range and tooltip
Vertical range with value tooltips.
Object position
Multiple labelled sliders with a reset-all action.
Price with histogram
Range slider over a price-distribution histogram.
Equalizer
Five vertical bands with pill thumbs and tooltips.
API Reference
Props, events, and slots for each sub-component.
Slider
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | number[] | [0] | Array of thumb values. Supports v-model. |
| min | number | 0 | Min value. |
| max | number | 100 | Max value. |
| step | number | 1 | Increment between values. |
| disabled | boolean | false | Disable input. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction of the track. |
| showTooltip | boolean | false | Show a tooltip with the current value above each thumb. |
| tooltipContent | (value: number) => string | undefined | Formatter for the tooltip label. Defaults to the raw value. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires continuously as a thumb moves. Enables v-model. |
| value-commit | Fires once when the user releases a thumb. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| ← | Decreases the value by one step. |
| ↓ | Decreases the value by one step. |
| → | Increases the value by one step. |
| ↑ | Increases the value by one step. |
| Home | Sets the value to the minimum. |
| End | Sets the value to the maximum. |
| Page Up | Increases the value by a large step. |
| Page Down | Decreases the value by a large step. |
- Each thumb has role=slider with aria-valuemin, aria-valuemax, and aria-valuenow.
- Provide an accessible label so screen readers announce the slider's purpose.