JavaScript Element ariaValueMax Property

What You’ll Learn

Element.ariaValueMax is an instance property that reflects the aria-valuemax attribute. Learn how it declares the maximum allowed value for a range widget, how it pairs with aria-valuemin and aria-valuenow, and how to get or set it from JavaScript—with five examples and try-it labs.

Introduction

Range widgets—volume sliders, progress bars, day-of-week pickers—have a lowest and highest allowed value. Assistive technologies need the maximum so they can announce the scale (for example “1 to 7”).

aria-valuemax declares that ceiling. The DOM property ariaValueMax lets you read and update it from JavaScript.

const el = document.getElementById("slider");
console.log(el.ariaValueMax); // "7"
el.ariaValueMax = "6";

Understanding the Property

MDN: the ariaValueMax property of the Element interface reflects the value of the aria-valuemax attribute, which defines the maximum allowed value for a range widget.

• Reflected attribute — mirrors aria-valuemax.
• Get / set — readable and writable string number.
• Range ceiling — the highest allowed value.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaValueMax

Value

A string which contains a number (the maximum allowed value).

📋 MDN Slider Example Shape

MDN starts with a slider marked aria-valuemax="7", then updates ariaValueMax to "6":

<div
  id="slider"
  role="slider"
  aria-valuenow="1"
  aria-valuemin="1"
  aria-valuemax="7"
  aria-valuetext="Sunday"></div>

let el = document.getElementById("slider");
console.log(el.ariaValueMax); // "7"
el.ariaValueMax = "6";
console.log(el.ariaValueMax); // "6"

This pattern often models days of the week (1–7) with aria-valuetext providing a spoken label like “Sunday.”

Examples Gallery

Examples follow MDN Element: ariaValueMax. Labs use a role="slider" so you can safely read and write the property.

const el = document.getElementById("slider");
console.log(el.ariaValueMax);

// HTML includes: aria-valuemax="7"

7

let el = document.getElementById("slider");
console.log(el.ariaValueMax); // "7"
el.ariaValueMax = "6";
console.log(el.ariaValueMax); // "6"

7
6

const el = document.createElement("div");
el.setAttribute("role", "slider");
el.setAttribute("aria-valuemin", "0");
el.setAttribute("aria-valuenow", "10");
el.setAttribute("aria-valuemax", "10");
document.body.appendChild(el);

el.ariaValueMax = "5";
const now = Number(el.getAttribute("aria-valuenow"));
const max = Number(el.ariaValueMax);
if (now > max) {
  el.setAttribute("aria-valuenow", String(max));
}
console.log({
  ariaValueMax: el.ariaValueMax,
  ariaValueNow: el.getAttribute("aria-valuenow")
});

{
  "ariaValueMax": "5",
  "ariaValueNow": "5"
}

const el = document.createElement("div");
el.setAttribute("role", "slider");
el.setAttribute("aria-valuemax", "7");
document.body.appendChild(el);

el.ariaValueMax = "6";
console.log({
  fromProperty: el.ariaValueMax,
  fromAttribute: el.getAttribute("aria-valuemax"),
  same: el.ariaValueMax === el.getAttribute("aria-valuemax")
});

{
  "fromProperty": "6",
  "fromAttribute": "6",
  "same": true
}

console.log({
  supported: "ariaValueMax" in Element.prototype,
  pairWith: ["aria-valuemin", "aria-valuenow", "aria-valuetext"],
  tip: "Prefer input type=range when a native control fits",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "pairWith": ["aria-valuemin", "aria-valuenow", "aria-valuetext"],
  "tip": "Prefer input type=range when a native control fits",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Custom volume, brightness, or seek sliders.
• Progress bars with a known maximum (for example 100%).
• Spinbuttons and day/week pickers with a fixed upper bound.
• Dynamically shrinking a range (for example fewer days available).
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Value is a string containing a number.
• Prefer native <input type="range"> when it fits.
• Related: ariaSort, ariaValueMin, EventTarget, JavaScript hub.

💡 Best Practices