The HTML aria-valuenow attribute
The aria-valuenow attribute reports the current numeric value of a range widget — a slider, spinbutton, scrollbar or progressbar. Pair it with aria-valuemin and aria-valuemax.
Overview
The aria-valuenow attribute defines the current value of a range widget such as a slider or progress bar.
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-valuenow 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="40"></div>Values
| Value |
|---|
| A number. |
Example
<div role="slider" aria-valuemin="0" aria-valuemax="10" aria-valuenow="7" 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").