A slider/spinbutton must expose a coherent value range

Rule slider-spinbutton-range-complete · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A slider or spinbutton exposes its value through aria-valuemin / aria-valuemax / aria-valuenow. An inverted range (min greater than max) or a non-numeric current value leaves assistive technology unable to report position within the range. Missing bounds are NOT flagged: ARIA 1.2 gives slider implicit defaults (0 and 100), so omitting them is spec-valid. (Whether aria-valuenow falls inside the bounds is checked separately by range-value-in-bounds.)

How to fix#

Set aria-valuemin ≤ aria-valuemax and keep aria-valuenow a number within them as the value changes.

Example#

<div role="slider" aria-valuenow="5" aria-valuemin="10" aria-valuemax="0">Level</div>

<div role="slider" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10">Level</div>

Example#

<div role="spinbutton" aria-valuenow="abc" tabindex="0">Qty</div>

<div role="spinbutton" aria-valuenow="3" tabindex="0">Qty</div>

aria-valuenow must be numeric; bounds may be omitted (slider defaults to 0–100 per ARIA).

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• APG — Slider