The HTML aria-valuemax attribute
The aria-valuemax attribute defines the maximum allowed value of a range widget such as a slider or spinbutton. Use it with aria-valuenow and aria-valuemin.
Overview
The aria-valuemax attribute defines the maximum allowed value of a range widget.
It describes a range widget — a slider, progress bar or spin button (role="slider", "progressbar", "spinbutton"). Native <input type="range">, <progress> and <meter> elements expose their values automatically, so reach for these attributes only when building a custom widget.
Like all ARIA, aria-valuemax changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80"></div>Values
| Value |
|---|
| A number. |
Example
<div role="slider" aria-valuemin="0" aria-valuemax="5" aria-valuenow="3" tabindex="0"></div>Best practices
- Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Prefer native <input type="range">, <progress> or <meter>, which expose their values for free.
- On a custom range widget, set the min, max and current value together and keep the current value updated.
- Add aria-valuetext when a bare number is not meaningful (e.g. "Medium" rather than "2").