Range Slider
Allows users to select a range. It includes two thumb controls that can be dragged to set the start and end values.
- Min and max values are not announced.
All the correct aria attributes and values are present. Deemed to be a screen reader limitation.
This component was tested and signed off by Applause (external accessibility specialists).
Both thumbs have a role of slider, which needs an accessible label. By default, they use a localized version of "min" and "max".
You can change the labels by setting the aria-start-label and aria-end-label attributes.
Vivid automatically sets the aria-valuetext attribute on the thumbs. The attribute is read by assistive technology. You can control its format using the valueTextFormatter property for a more human-readable value.