RangeSlider
Use the KRangeSlider component to allow users to select a range of values with two handles.
Dual Handle Range Selection
// Standard tuple v-model usage
KRangeSlider(v-model="rangeTuple" :min="0" :max="100")
// Dual prop v-model usage
KRangeSlider(v-model:minValue="minVal" v-model:maxValue="maxVal" :min="0" :max="100" :step="5")
Configure the KRangeSlider component using these attributes.
| Name | Type | Default | Description |
|---|
| label | string | '' | There will be a label. |
| v-model / modelValue | [number, number] | number[] | undefined | Array tuple [min, max] binding both handles simultaneously |
| v-model:minValue / minValue | number | 0 | Binding value for the lower range handle |
| v-model:maxValue / maxValue | number | 100 | Binding value for the upper range handle |
| min | number | 0 | The absolute minimum boundary |
| max | number | 100 | The absolute maximum boundary |
| step | number | 1 | The interval between selectable values |
| disabled | boolean | false | Disables the slider |
Interactivity events emitted by KRangeSlider.
| Name | Payload | Description |
|---|
| @update:modelValue | (value: [number, number]) | Emitted when either handle moves (for standard array v-model) |
| @update:minValue | (value: number) | Emitted when the lower handle moves |
| @update:maxValue | (value: number) | Emitted when the upper handle moves |