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-api';

registerRangeSlider('your-prefix');

<script type="module">
  import { registerRangeSlider } from '@vonage/vivid-api';
  registerRangeSlider('your-prefix');
</script>

<your-prefix-range-slider aria-label="Default range slider"></your-prefix-range-slider>

Min

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

<script setup lang="ts">
import { ref, useTemplateRef, onMounted } from 'vue';
import { VLayout, VRangeSlider } from '@vonage/vivid-api-vue';

const slider = useTemplateRef<InstanceType<typeof VRangeSlider>>('slider');
const start = ref('');
const end = ref('');

const updateDescription = () => {
  if (!slider.value) return;
  start.value = slider.value.element.start;
  end.value = slider.value.element.end;
};

onMounted(() => updateDescription());
</script>

<template>
  <VLayout column-basis="block" gutters="small">
    <div>
      <VRangeSlider :min="-10" ref="slider" aria-label="Min value example" @change="updateDescription" />
    </div>
    <div>
      Current range:
      <span v-text="start"></span>
      to
      <span v-text="end"></span>
    </div>
  </VLayout>
</template>

<div>
  <vwc-range-slider min="-10" id="slider" aria-label="Min value example"></vwc-range-slider>
</div>
<div>
  Current range:
  <span id="start"></span>
  to
  <span id="end"></span>
</div>

<script>
  const slider = document.querySelector('#slider');
  const start = document.querySelector('#start');
  const end = document.querySelector('#end');

  const updateDescription = () => {
    start.innerText = slider.start;
    end.innerText = slider.end;
  };
  customElements.whenDefined('vwc-range-slider').then(updateDescription);

  slider.addEventListener('change', updateDescription);
</script>

Max

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

<script setup lang="ts">
import { ref, useTemplateRef, onMounted } from 'vue';
import { VLayout, VRangeSlider } from '@vonage/vivid-api-vue';

const slider = useTemplateRef<InstanceType<typeof VRangeSlider>>('slider');
const start = ref('');
const end = ref('');

const updateDescription = () => {
  if (!slider.value) return;
  start.value = slider.value.element.start;
  end.value = slider.value.element.end;
};

onMounted(() => updateDescription());
</script>

<template>
  <VLayout column-basis="block" gutters="small">
    <div>
      <VRangeSlider :max="20" ref="slider" aria-label="Max value example" @change="updateDescription" />
    </div>
    <div>
      Current range:
      <span v-text="start"></span>
      to
      <span v-text="end"></span>
    </div>
  </VLayout>
</template>

<div>
  <vwc-range-slider max="20" id="slider" aria-label="Max value example"></vwc-range-slider>
</div>
<div>
  Current range:
  <span id="start"></span>
  to
  <span id="end"></span>
</div>

<script>
  const slider = document.querySelector('#slider');
  const start = document.querySelector('#start');
  const end = document.querySelector('#end');

  const updateDescription = () => {
    start.innerText = slider.start;
    end.innerText = slider.end;
  };
  customElements.whenDefined('vwc-range-slider').then(updateDescription);

  slider.addEventListener('change', updateDescription);
</script>

Step

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

<script setup lang="ts">
import { ref, useTemplateRef, onMounted } from 'vue';
import { VLayout, VRangeSlider } from '@vonage/vivid-api-vue';

const slider = useTemplateRef<InstanceType<typeof VRangeSlider>>('slider');
const start = ref('');
const end = ref('');

const updateDescription = () => {
  if (!slider.value) return;
  start.value = slider.value.element.start;
  end.value = slider.value.element.end;
};

onMounted(() => updateDescription());
</script>

<template>
  <VLayout column-basis="block" gutters="small">
    <div>
      <VRangeSlider :step="0.5" ref="slider" markers aria-label="Step example" @change="updateDescription" />
    </div>
    <div>
      Current range:
      <span v-text="start"></span>
      to
      <span v-text="end"></span>
    </div>
  </VLayout>
</template>

<div>
  <vwc-range-slider step="0.5" id="slider" markers aria-label="Step example"></vwc-range-slider>
</div>
<div>
  Current range:
  <span id="start"></span>
  to
  <span id="end"></span>
</div>

<script>
  const slider = document.querySelector('#slider');
  const start = document.querySelector('#start');
  const end = document.querySelector('#end');

  const updateDescription = () => {
    start.innerText = slider.start;
    end.innerText = slider.end;
  };
  customElements.whenDefined('vwc-range-slider').then(updateDescription);

  slider.addEventListener('change', updateDescription);
</script>

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

Property	Type	Description
ariaEndLabel	`string`	Aria label for the end thumb
ariaStartLabel	`string`	Aria label for the start thumb
connotation	`'accent' \| 'cta'`	The connotation of the component
disabled	`boolean`	Sets the element's disabled state. A disabled element will not be included during form submission.
currentEnd (end)	`string`	The current end value of the element. This property serves as a mechanism to set the `end` property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding.
endAsNumber (endAsNumber)	`number`	The end property, typed as a number.
initialEnd	`string`	The initial end value. This value sets the `end` property only when the `end` property has not been explicitly set.
initialStart	`string`	The initial start value. This value sets the `start` property only when the `start` property has not been explicitly set.
initialValue	`string`	The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label	`string`	The label for the form element.
markers	`boolean`	Display markers on/off
max	`number`	The maximum value of the range.
min	`number`	The minimum value of the range.
name	`string`	The name of the element. This element's value will be surfaced during form submission under the provided name.
orientation	`'horizontal' \| 'vertical'`	The orientation of the slider.
pin	`boolean`	Show current values on the thumbs.
required	`boolean`	Require the field to be completed prior to form submission.
currentStart (start)	`string`	The current start value of the element. This property serves as a mechanism to set the `start` property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding.
startAsNumber (startAsNumber)	`number`	The start property, typed as a number.
step	`number`	Value to increment or decrement via arrow keys, mouse click or drag.
value	`string`	The current value of the element.
valueTextFormatter	`((value: string) => string)`	Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.

Property	Type	Description
aria-end-label	`string`	Aria label for the end thumb
aria-start-label	`string`	Aria label for the start thumb
connotation	`'accent' \| 'cta'`	The connotation of the component
disabled	`boolean`	Sets the element's disabled state. A disabled element will not be included during form submission.
current-end	`string`	The current end value of the element. This property serves as a mechanism to set the `end` property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding.
endAsNumber (property only)	`number`	The end property, typed as a number.
end	`string`	The initial end value. This value sets the `end` property only when the `end` property has not been explicitly set.
start	`string`	The initial start value. This value sets the `start` property only when the `start` property has not been explicitly set.
value	`string`	The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label	`string`	The label for the form element.
markers	`boolean`	Display markers on/off
max	`number`	The maximum value of the range.
min	`number`	The minimum value of the range.
name	`string`	The name of the element. This element's value will be surfaced during form submission under the provided name.
orientation	`'horizontal' \| 'vertical'`	The orientation of the slider.
pin	`boolean`	Show current values on the thumbs.
required	`boolean`	Require the field to be completed prior to form submission.
current-start	`string`	The current start value of the element. This property serves as a mechanism to set the `start` property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding.
startAsNumber (property only)	`number`	The start property, typed as a number.
step	`number`	Value to increment or decrement via arrow keys, mouse click or drag.
current-value	`string`	The current value of the element.
valueTextFormatter (property only)	`((value: string) => string)`	Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.

Events

Name	Type	Description
change	`CustomEvent<undefined>`	Event emitted when either the start or end value changes.
input	`CustomEvent<undefined>`	Event emitted when either the start or end value changes.
input:end	`CustomEvent<undefined>`	Event emitted when the end value changes
input:start	`CustomEvent<undefined>`	Event emitted when the start value changes

Name	Type	Description
change	`CustomEvent<undefined>`	Event emitted when either the start or end value changes.
input	`CustomEvent<undefined>`	Event emitted when either the start or end value changes.
input:end	`CustomEvent<undefined>`	Event emitted when the end value changes
input:start	`CustomEvent<undefined>`	Event emitted when the start value changes

Methods

Name	Returns	Description
checkValidity	`boolean`	Return the current validity of the element.
formResetCallback	`void`
reportValidity	`boolean`	Return the current validity of the element. If false, fires an invalid event at the element.