Slider
Allows users to choose from a range of values along a horizontal or vertical line
Use the connotation attribute on Slider to control the Slider track.
<script setup lang="ts">import { VSlider } from '@vonage/vivid-api-vue';</script>
<template> <VSlider aria-label="Slider with the accent connotation" connotation="accent" /> <VSlider aria-label="Slider with the cta connotation" connotation="cta" /></template><vwc-slider aria-label="Slider with the accent connotation" connotation="accent"></vwc-slider> <vwc-slider aria-label="Slider with the cta connotation" connotation="cta"></vwc-slider>Use the markers attribute to add tick marks on the slider.
The markers are set by the value of step.
<script setup lang="ts">import { VSlider } from '@vonage/vivid-api-vue';</script>
<template> <VSlider aria-label="Slider with markers" markers /></template><vwc-slider aria-label="Slider with markers" markers></vwc-slider>The orientation attribute controls which axis the Slider is aligned.
Below is an example of vertical alignment.
When used vertically, the Slider fits the height of its container.
<script setup lang="ts">import { VSlider } from '@vonage/vivid-api-vue';</script>
<template> <VSlider aria-label="Vertical slider" orientation="vertical" /></template><vwc-slider aria-label="Vertical slider" orientation="vertical"></vwc-slider>Use pin attribute to display a tooltip on the Slider knob.
Use the valueTextFormatter member to customize the format of the value.
<script setup lang="ts">import { VSlider } from '@vonage/vivid-api-vue';import { useTemplateRef, onMounted } from 'vue';
const slider1 = useTemplateRef<InstanceType<typeof VSlider>>();const slider2 = useTemplateRef<InstanceType<typeof VSlider>>();
onMounted(() => {if (slider1.value?.element) {slider1.value.element.valueTextFormatter = (value) => `${value} units`;}if (slider2.value?.element) {slider2.value.element.valueTextFormatter = (value) => `${value} units`;}});
</script>
<template> <VSlider ref="slider1" aria-label="Slider with a pin" pin /> <VSlider ref="slider2" aria-label="Vertical slider with a pin" orientation="vertical" style="height: 200px" pin /></template><vwc-slider aria-label="Slider with a pin" pin></vwc-slider><vwc-slider aria-label="Vertical slider with a pin" orientation="vertical" style="height: 200px" pin></vwc-slider>
<script> for (const slider of document.querySelectorAll('vwc-slider')) { slider.valueTextFormatter = (value) => `${value} units`; }</script>The disabled attribute disables the Slider.
<script setup lang="ts">import { VSlider } from '@vonage/vivid-api-vue';</script>
<template> <VSlider aria-label="Disabled slider" disabled /></template><vwc-slider aria-label="Disabled slider" disabled></vwc-slider>