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.
| Property | Type | Default | Description |
|---|---|---|---|
| ariaEndLabel | string |
Aria label for the end thumb | |
| ariaStartLabel | string |
Aria label for the start thumb | |
| connotation | 'accent' | 'cta' |
The connotation of the component | |
| disabled | boolean |
Sets the element's disabled state. A disabled element will not be included during form submission. | |
| currentEnd (end) |
string |
The current end value of the element. This property serves as a mechanism to set the `end` property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding. | |
| endAsNumber (endAsNumber) |
number |
The end property, typed as a number. | |
| initialEnd | string |
The initial end value. This value sets the `end` property only when the `end` property has not been explicitly set. | |
| initialStart | string |
The initial start value. This value sets the `start` property only when the `start` property has not been explicitly set. | |
| initialValue | string |
The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set. | |
| label | string |
The label for the form element. | |
| markers | boolean |
Display markers on/off | |
| max | number |
The maximum value of the range. | |
| min | number |
The minimum value of the range. | |
| name | string |
The name of the element. This element's value will be surfaced during form submission under the provided name. | |
| orientation | 'horizontal' | 'vertical' |
The orientation of the slider. | |
| pin | boolean |
Show current values on the thumbs. | |
| required | boolean |
Require the field to be completed prior to form submission. | |
| currentStart (start) |
string |
The current start value of the element. This property serves as a mechanism to set the `start` property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding. | |
| startAsNumber (startAsNumber) |
number |
The start property, typed as a number. | |
| step | number |
Value to increment or decrement via arrow keys, mouse click or drag. | |
| value | string |
The current value of the element. | |
| valueTextFormatter | ((value: string) => string) |
Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value. |
| Property | Type | Default | Description |
|---|---|---|---|
| aria-end-label | string |
Aria label for the end thumb | |
| aria-start-label | string |
Aria label for the start thumb | |
| connotation | 'accent' | 'cta' |
The connotation of the component | |
| disabled | boolean |
Sets the element's disabled state. A disabled element will not be included during form submission. | |
| current-end | string |
The current end value of the element. This property serves as a mechanism to set the `end` property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding. | |
|
endAsNumber
(property only) |
number |
The end property, typed as a number. | |
| end | string |
The initial end value. This value sets the `end` property only when the `end` property has not been explicitly set. | |
| start | string |
The initial start value. This value sets the `start` property only when the `start` property has not been explicitly set. | |
| value | string |
The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set. | |
| label | string |
The label for the form element. | |
| markers | boolean |
Display markers on/off | |
| max | number |
The maximum value of the range. | |
| min | number |
The minimum value of the range. | |
| name | string |
The name of the element. This element's value will be surfaced during form submission under the provided name. | |
| orientation | 'horizontal' | 'vertical' |
The orientation of the slider. | |
| pin | boolean |
Show current values on the thumbs. | |
| required | boolean |
Require the field to be completed prior to form submission. | |
| current-start | string |
The current start value of the element. This property serves as a mechanism to set the `start` property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding. | |
|
startAsNumber
(property only) |
number |
The start property, typed as a number. | |
| step | number |
Value to increment or decrement via arrow keys, mouse click or drag. | |
| current-value | string |
The current value of the element. | |
|
valueTextFormatter
(property only) |
((value: string) => string) |
Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value. |
| Event | Type | Description |
|---|---|---|
| change | CustomEvent<undefined> |
Event emitted when either the start or end value changes. |
| input | CustomEvent<undefined> |
Event emitted when either the start or end value changes. |
| input:end | CustomEvent<undefined> |
Event emitted when the end value changes |
| input:start | CustomEvent<undefined> |
Event emitted when the start value changes |
| update:end | string |
Fires when the end value changes |
| update:endAsNumber | number |
Fires when the endAsNumber value changes |
| update:start | string |
Fires when the start value changes |
| update:startAsNumber | number |
Fires when the startAsNumber value changes |
| Name | Type | Description |
|---|---|---|
| change | CustomEvent<undefined> |
Event emitted when either the start or end value changes. |
| input | CustomEvent<undefined> |
Event emitted when either the start or end value changes. |
| input:end | CustomEvent<undefined> |
Event emitted when the end value changes |
| input:start | CustomEvent<undefined> |
Event emitted when the start value changes |
| Name | Params | Returns | Description |
|---|---|---|---|
| checkValidity |
boolean
|
Return the current validity of the element. | |
| formResetCallback |
void
|
||
| reportValidity |
boolean
|
Return the current validity of the element. If false, fires an invalid event at the element. |