Range Slider
Allows users to select a range. It includes two thumb controls that can be dragged to set the start and end values.
Use the connotation attribute on Range Slider to control the color of the selected range.
<script setup lang="ts">import { VLayout, VRangeSlider } from '@vonage/vivid-api-vue';</script><template> <VLayout column-basis="block" gutters="small"> <VRangeSlider connotation="accent" aria-label="Accent connotation example" /> <VRangeSlider connotation="cta" aria-label="CTA connotation example" /> </VLayout></template><vwc-range-slider connotation="accent" aria-label="Accent connotation example"></vwc-range-slider> <vwc-range-slider connotation="cta" aria-label="CTA connotation example"></vwc-range-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 {VRangeSlider} from '@vonage/vivid-api-vue';</script><template> <VRangeSlider markers aria-label="Example with markers" /></template><vwc-range-slider markers aria-label="Example with markers"></vwc-range-slider>The orientation attribute controls which axis the Range Slider is aligned.
Below is an example of vertical alignment.
When used vertically, the range slider fits the height of its container.
<script setup lang="ts"> import {VRangeSlider} from '@vonage/vivid-api-vue';</script><template> <VRangeSlider orientation="vertical" aria-label="Vertical orientation example" /></template><vwc-range-slider orientation="vertical" aria-label="Vertical orientation example"></vwc-range-slider>Use pin attribute to display a tooltip at the start and end values.
Use the valueTextFormatter member to customize the format of the values.
<script setup lang="ts">import { useTemplateRef, onMounted } from 'vue';import { VRangeSlider } from '@vonage/vivid-api-vue';const horizontalSlider = useTemplateRef<InstanceType<typeof VRangeSlider>>('horizontal');const verticalSlider = useTemplateRef<InstanceType<typeof VRangeSlider>>('vertical');
onMounted(() => {if (horizontalSlider.value) {horizontalSlider.value.element.valueTextFormatter = (value) => `${value} units`;}if (verticalSlider.value) {verticalSlider.value.element.valueTextFormatter = (value) => `${value} units`;}});
</script><template> <VRangeSlider ref="horizontal" pin aria-label="Horizontal example with pins" /> <VRangeSlider ref="vertical" pin orientation="vertical" style="height: 200px" aria-label="Vertical example with pins" /></template><vwc-range-slider pin class="slider" aria-label="Horizontal example with pins"></vwc-range-slider><vwc-range-slider pin class="slider" orientation="vertical" style="height: 200px" aria-label="Vertical example with pins"></vwc-range-slider><script> for (const slider of document.querySelectorAll('.slider')) { slider.valueTextFormatter = (value) => `${value} units`; }</script>The disabled attribute disables the Range Slider.
<script setup lang="ts"> import {VRangeSlider} from '@vonage/vivid-api-vue';</script><template> <VRangeSlider disabled aria-label="Disabled example" /></template><vwc-range-slider disabled aria-label="Disabled example"></vwc-range-slider>