Slider
Use the KSlider component to allow users to select a single value within a defined range.
Single Value Range Selection
// Standard v-model usage
KSlider(v-model="myValue")
// Alternative v-model:value usage
KSlider(v-model:value="myValue")
// With configuration
KSlider(v-model="myValue" :min="0" :max="10" :step="0.5")
Configure the KSlider component using these attributes.
| Name | Type | Default | Description |
|---|
| label | string | '' | There will be a label. |
| v-model / modelValue | number | 0 | Primary two-way binding value for the slider handle |
| v-model:value / value | number | undefined | Alternative two-way binding value for backwards compatibility |
| 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 KSlider.
| Name | Payload | Description |
|---|
| @update:modelValue | (value: number) | Emitted when slider value changes (for standard v-model) |
| @update:value | (value: number) | Emitted when slider value changes (for v-model:value) |