Slider
Allows users to choose from a range of values along a horizontal or vertical line
import { registerSlider } from '@vonage/vivid';
registerSlider('your-prefix');
Set the value attribute to set the value of the Slider.
Use the valueTextFormatter to generates a string for the Slider's "aria-valuetext" attribute based on the current value.
Use this to configure the pin string.
Use the min attribute to set the lowest value allowed for the Slider.
The default value of min is 0.
Use the max attribute to set the highest value allowed for the 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 of step is 1.
| Property | Type | Default | Description |
|---|---|---|---|
| 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. | |
| initialValue | string |
The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set. | |
| markers | boolean |
Display markers on/off | |
| max | number |
The maximum allowed value. | |
| min | number |
The minimum allowed value. | |
| mode | 'single-value' |
The selection mode. | |
| 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. | |
| readOnly | boolean |
When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. | |
| required | boolean |
Require the field to be completed prior to form submission. | |
| step | number |
Value to increment or decrement via arrow keys, mouse click or drag. | |
| value (modelValue) |
string |
The current value of the element. | |
| valueAsNumber (valueAsNumber) |
number |
The value property, typed as a number. | |
| 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 |
|---|---|---|---|
| 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. | |
| value | string |
The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set. | |
| markers | boolean |
Display markers on/off | |
| max | number |
The maximum allowed value. | |
| min | number |
The minimum allowed value. | |
| mode | 'single-value' |
The selection mode. | |
| 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. | |
| readonly | boolean |
When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. | |
| required | boolean |
Require the field to be completed prior to form submission. | |
| step | number |
Value to increment or decrement via arrow keys, mouse click or drag. | |
| current-value | string |
The current value of the element. | |
|
valueAsNumber
(property only) |
number |
The value property, typed as a number. | |
|
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> |
Fires a custom 'change' event when the slider value changes |
| update:modelValue | string |
Fires when the modelValue value changes |
| update:valueAsNumber | number |
Fires when the valueAsNumber value changes |
| Name | Type | Description |
|---|---|---|
| change | CustomEvent<undefined> |
Fires a custom 'change' event when the slider value changes |
| Name | Params | Returns | Description |
|---|---|---|---|
| checkValidity |
boolean
|
Return the current validity of the element. | |
| decrement |
void
|
Decrement the value by the step | |
| increment |
void
|
Increment the value by the step | |
| reportValidity |
boolean
|
Return the current validity of the element. If false, fires an invalid event at the element. |