Range Slider
Allows users to select a range. It includes two thumb controls that can be dragged to set the start and end values.
import { registerRangeSlider } from '@vonage/vivid';
registerRangeSlider('your-prefix');
Use the min attribute to set the lowest value allowed for the Range Slider.
The default value of min is 0.
Use the max attribute to set the highest value allowed for the Range Slider.
The default value max of is 10.
Use the step attribute sets the granularity with which values can be incremented/decremented.
The default value step of is 1.
Use the start attribute to set the lower position of the range indicator.
The default value of start is min.
Use the end attribute to set the upper position of the range indicator.
The default value of end is max.
Use the valueTextFormatter to generates a string for the Range Slider's "aria-valuetext" attribute based on the current value.
Use this to configure the pin string.
| Name | Type | Description |
|---|---|---|
| aria-start-label | string |
Aria label for the start thumb |
| aria-end-label | string |
Aria label for the end thumb |
| connotation | Enum:accentcta |
The connotation of the component |
| disabled | boolean |
Sets the element's disabled state |
| end | string |
The current end value of the element. |
| markers | boolean |
Display markers on/off |
| max | number |
The maximum value of the range. |
| min | number |
The minimum value of the range. |
| orientation | Enum:horizontalvertical |
The orientation of the slider. |
| pin | boolean |
Show current values on the thumbs. |
| start | string |
The current start value of the element. |
| step | number |
Value to increment or decrement via arrow keys, mouse click or drag. |
| Name | Type | Bubbles | Composed | Description |
|---|---|---|---|---|
| input:start | CustomEvent<undefined> |
Yes | Yes | Event emitted when the start value changes |
| input:end | CustomEvent<undefined> |
Yes | Yes | Event emitted when the end value changes |
| input | CustomEvent<undefined> |
Yes | Yes | Event emitted when either the start or end value changes. |
| change | CustomEvent<undefined> |
Yes | Yes | Event emitted when either the start or end value changes. |