Vue Range Component API
Range API
Explore the API reference for the Vue Range component and discover how to effectively utilize its props for customization.
import { CFormRange } from '@coreui/vue'
| Property | Default | Type |
|---|
| disabled | - | boolean |
Toggle the disabled state for the component. |
| label4.3.0+ | - | string |
Add a caption for a component. |
| max | 100 | number |
Specifies the maximum value for the component. |
| min | 0 | number |
Specifies the minimum value for the component. |
| modelValue | - | |
The default name for a value passed using v-model. |
| readonly | - | boolean |
Toggle the readonly state for the component. |
| step | - | number |
Specifies the interval between legal numbers in the component. |
| theme6.0.0+ | - | Color |
Sets the color context of the component to one of CoreUI’s themed colors. |
| ticks6.0.0+ | () => [] | Tick[] |
Tick marks under the track. A number is a bare tick at that value; a string is a label placed by its position in the array, the first at min and the last at max; an object sets value, label, className and style, and without a value is placed by its position. |
| tooltipClassName6.0.0+ | - | string |
Classes for the value tooltip, for example a theme-{color} class, since a tooltip does not inherit the theme of the range. |
| tooltips6.0.0+ | false | boolean, 'always' |
Shows a tooltip with the current value above the thumb: true while the input is hovered, dragged or focused, 'always' at all times. |
| tooltipsFormat6.0.0+ | null | (value: number) => string, VNode |
Formats the tooltip content. A string it returns is also the aria-valuetext of the input. |
| track6.0.0+ | 'fill' | boolean, 'fill' |
Fills the track up to the thumb. Set false to leave the track unfilled. |
| value | - | number |
The initial value of the component when it is not bound with v-model. |
| Event name |
|---|
| change |
Event occurs when the value has been changed. |
| update:modelValue |
Emit the new value whenever there’s an input event. |