Slider
Allows users to choose from a range of values along a horizontal or vertical line
import { registerSlider } from '@vonage/vivid';
registerSlider('your-prefix');
<script setup lang="ts">
import { VSlider } from '@vonage/vivid-vue';
</script>
<template>
<VSlider aria-label="Vue Slider" />
</template>
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.
| Name | Type | Description |
|---|---|---|
| connotation | Enum:accentcta |
The connotation of the component |
| disabled | boolean |
Sets the element's disabled state |
| 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. |
| step | number |
Value to increment or decrement via arrow keys, mouse click or drag. |
| value | number |
Set the value attribute to set the value of the slider. |
| Name | Type | Bubbles | Composed | Description |
|---|---|---|---|---|
| change | CustomEvent<undefined> |
Yes | Yes | Fires a custom 'change' event when the slider value changes |