Slider

WCAG 2.1 AA — release blocker

Slider must satisfy these on every render before it ships.

Web (React DOM)

• Each thumb renders role="slider" with aria-valuemin, aria-valuemax, aria-valuenow.
• Track and range are decorative — only the thumbs are interactive.
• Focus ring is a 2px ring-ring outline on the active thumb.
• Disabled thumbs have aria-disabled="true" and cannot be focused.

Keyboard

Range mode

In dual-thumb mode, each thumb is independently focusable. Tab moves between thumbs. Values are constrained — a thumb cannot cross past the other.

React Native

• Slider is a View stub on native (not yet interactive).

Reduced motion

Transition on thumb hover is 150ms and respects prefers-reduced-motion.

Audit checklist

• Each thumb has role="slider" with value attributes
• Arrow keys change value by one step
• Home/End jump to min/max
• Focus ring visible on active thumb
• Disabled state announced and non-interactive
• 4.5:1 contrast on track and thumb