Slider
Range
To show a range value the v-model should be an array of two numbers
Step
Jumps by step instead of default value of 1.
tooltip & alwaysTooltip
tooltip shows a tooltip when dragging the slider and alwaysTooltip keeps it visible.
ticks & tickLabels
Both props are boolean. ticks shows a small dot on each value and tickLables defines whether to show the label of the ticks which defaults to the value of that tick.
Custom Ticks
You can define your own ticks and their labels. it will be an array of objects including keys of value (value of tick) and text.
Tick Slot
Tick label is customizable using named tick slot. if receives {value: number} as slot props or whatever you pass in each item of customTicks.
By default first and last ticks are hidden to avoid style issues they might cause, to reset this behaviour set hideFirstAndLastTickLabel to false.
Props
| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| modelValue | number | Array<number> | Yes | 0 | The value of slider ( array when it's a range [left: number, right: number] ). |
| min | number | No | - | The minimum value of the slider. |
| max | number | No | - | The maximum value of the slider. |
| step | number | No | 1 | The steps in which the slider should move. |
| precision | number | No | 0 | Numer of decimals. |
| tooltip | boolean | No | false | Whether to show tooltip on grab |
| alwaysTooltip | boolean | No | false | If true will always show tooltip |
| color | string | No | undefined | Color of slider |
| ticks | boolean | No | false | If true will show ticks in which value can stop on |
| tickLabels | boolean | No | false | If true will show label of ticks |
| customTicks | Array<{text: string, value: number}> | No | undefined | For showing custom tick labels |
| hideFirstAndLastTickLabel | boolean | No | true | Whether to hide first and last tick label or not. |
Slots
| Name | slot props | description |
|---|---|---|
| tooltip | { value } | - |
| tick | { value, text } | custom tick component |