Range Slider

Allows users to select a range. It includes two thumb controls that can be dragged to set the start and end values.

Usage

import { registerRangeSlider } from '@vonage/vivid';

registerRangeSlider('your-prefix');

<script setup lang="ts">
	import { VRangeSlider } from '@vonage/vivid-vue';
</script>
<template>
	<VRangeSlider />
</template>

Min

Use the min attribute to set the lowest value allowed for the Range Slider.
The default value of min is 0.

Max

Use the max attribute to set the highest value allowed for the Range Slider.
The default value max of is 10.

Step

Use the step attribute sets the granularity with which values can be incremented/decremented.
The default value step of is 1.

Start

Use the start attribute to set the lower position of the range indicator.
The default value of start is min.

End

Use the end attribute to set the upper position of the range indicator.
The default value of end is max.

Value Text Formatter

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.

API Reference

Properties

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: `accent` `cta`	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: `horizontal` `vertical`	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.

Events

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.