Range components allow users to select a value within a specific range by dragging a handle.
The family includes Range for basic slider functionality and RangeMeasure for displaying tick marks or numbered values.
The Range components include the following:
The Range component allows users to select a value within a specific range by dragging a handle. It can be used independently or paired with the RangeMeasure component.
| Range Props | Type | Description |
|---|---|---|
modelValue | number | string | |
min | number | string | Sets the minimum value of the range. |
max | number | string | Sets the maximum value of the range. |
step | number | string | Sets the step interval for the range. |
disabled | boolean | When true, disables the range slider. |
color | string | Sets the color variant. Options: - |
| neutral | boolean | Applies the neutral color variant. |
| primary | boolean | Applies the primary color variant. |
| secondary | boolean | Applies the secondary color variant. |
| accent | boolean | Applies the accent color variant. |
| success | boolean | Applies the success color variant. |
| warning | boolean | Applies the warning color variant. |
| info | boolean | Applies the info color variant. |
| error | boolean | Applies the error color variant. |
size | string | Sets the size variant. Options: - |
| xs | boolean | Applies the extra small size variant. |
| sm | boolean | Applies the small size variant. |
| md | boolean | Applies the medium size variant. |
| lg | boolean | Applies the large size variant. |
| xl | boolean | Applies the extra large size variant. |
| Range Events | Arguments | Description |
|---|---|---|
update:modelValue |
The RangeMeasure component displays tick marks or numbered values for a range. It pairs well with the Range component to provide visual reference points.
| RangeMeasure Props | Type | Description |
|---|---|---|
modelValue | number | string | |
min | number | string | Sets the minimum value of the range. Default is 0. |
max | number | string | Sets the maximum value of the range. Default is 100. |
step | number | string | Sets the step interval for the range. Default is 1. |
numbered | boolean | When true, displays numbers instead of tick marks. |
asButtons | boolean | When true, renders the tick marks as clickable buttons. |
disabled | boolean | When true, disables the component. |
color | string | Sets the color variant. Options: - |
| neutral | boolean | Applies the neutral color variant. |
| primary | boolean | Applies the primary color variant. |
| secondary | boolean | Applies the secondary color variant. |
| accent | boolean | Applies the accent color variant. |
| success | boolean | Applies the success color variant. |
| warning | boolean | Applies the warning color variant. |
| info | boolean | Applies the info color variant. |
| error | boolean | Applies the error color variant. |
size | string | Sets the size variant. Options: - |
| xs | boolean | Applies the extra small size variant. |
| sm | boolean | Applies the small size variant. |
| md | boolean | Applies the medium size variant. |
| lg | boolean | Applies the large size variant. |
| xl | boolean | Applies the extra large size variant. |
| RangeMeasure Events | Arguments | Description |
|---|---|---|
update:modelValue |
| RangeMeasure Slots | Description |
|---|---|
default | The default slot. Used to customize the appearance of tick marks. |
The RangeMeasureTick component represents an individual tick mark in a RangeMeasure component. It's used internally by RangeMeasure and typically not used directly.
| RangeMeasureTick Props | Type | Description |
|---|---|---|
tick | number | The value associated with this tick mark. |
modelValue | number | string | |
numbered | boolean | When true, displays the tick value as a number. |
asButton | boolean | When true, renders the tick mark as a clickable button. |
isHidden | boolean | When true, hides the tick mark. |
disabled | boolean | When true, disables the tick mark. |
| RangeMeasureTick Events | Arguments | Description |
|---|---|---|
update:modelValue |
| RangeMeasureTick Slots | Description |
|---|---|
default | The default slot. Used to customize the appearance of the tick mark. |