Slider

Allows users to choose from a range of values along a horizontal or vertical line

Usage

import '@vonage/vivid/slider';

or, if you need to use a unique prefix:

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

registerSlider('your-prefix');

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<script type="module">
	import { registerSlider } from 'vivid-bundle';
	registerSlider('your-prefix');
</script>

<your-prefix-slider aria-label="Your slider"></your-prefix-slider>

<script setup lang="ts">
	import { VSlider } from '@vonage/vivid-vue';
</script>
<template>
	<VSlider aria-label="Vue Slider" />
</template>

Value

Set the value attribute to set the value of the Slider.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-slider aria-label="Slider with the value attribute" value="3"></vwc-slider>

Value Text Formatter

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.

Min

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

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div>
	<vwc-slider
		aria-label="Slider with the min attribute"
		id="slider"
		min="-5"
	></vwc-slider>
</div>
<div>
	Current value:
	<span id="slidervalue"></span>
</div>

<script>
	slider.addEventListener(
		'change',
		(e) => (slidervalue.innerText = slider.value)
	);
</script>

Max

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

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div>
	<vwc-slider
		aria-label="Slider with the max attribute"
		id="slider"
		max="100"
	></vwc-slider>
</div>
<div>
	Current value:
	<span id="slidervalue"></span>
</div>

<script>
	slider.addEventListener(
		'change',
		(e) => (slidervalue.innerText = slider.value)
	);
</script>

Step

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

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div>
	<vwc-slider
		aria-label="Slider with the step attribute"
		id="slider"
		step="0.5"
	></vwc-slider>
</div>
<div>
	Current value:
	<span id="slidervalue"></span>
</div>

<script>
	slider.addEventListener(
		'change',
		(e) => (slidervalue.innerText = slider.value)
	);
</script>

API Reference

Properties

Name	Type	Description
connotation	Enum: `accent` `cta`	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: `horizontal` `vertical`	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.

Events

Name	Type	Bubbles	Composed	Description
change	`CustomEvent<undefined>`	Yes	Yes	Fires a custom 'change' event when the slider value changes