Vivid Logo Vivid

Slider

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

  • 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).

Implementation

The slider has a role of slider, which needs an accessible label. You must provide it using aria-label.

Vivid automatically sets the aria-valuetext attribute on the slider. The attribute is read by assistive technology. You can control its format using the valueTextFormatter property for a more human-readable value.

Resources