JavaScript Element ariaValueNow Property

What You’ll Learn

Element.ariaValueNow is an instance property that reflects the aria-valuenow attribute. Learn how it declares the current value for a range widget, how it pairs with aria-valuemin and aria-valuemax, 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 current value so they can announce where the control sits on that scale (for example “2 of 1 to 7”).

aria-valuenow declares that current position. The DOM property ariaValueNow lets you read and update it from JavaScript.

const el = document.getElementById("slider");
console.log(el.ariaValueNow); // "1"
el.ariaValueNow = "2";

Understanding the Property

MDN: the ariaValueNow property of the Element interface reflects the value of the aria-valuenow attribute, which defines the current value for a range widget.

• Reflected attribute — mirrors aria-valuenow.
• Get / set — readable and writable string number.
• Current value — where the widget sits now.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaValueNow

Value

A string which contains a number (the current value).

📋 MDN Slider Example Shape

MDN starts with a slider marked aria-valuenow="1", then updates ariaValueNow to "2":

<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.ariaValueNow); // "1"
el.ariaValueNow = "2";
console.log(el.ariaValueNow); // "2"

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: ariaValueNow. Labs use a role="slider" so you can safely read and write the property.

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

// HTML includes: aria-valuenow="1"

1

let el = document.getElementById("slider");
console.log(el.ariaValueNow); // "1"
el.ariaValueNow = "2";
console.log(el.ariaValueNow); // "2"

1
2

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

const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
el.ariaValueNow = "2";
el.setAttribute("aria-valuetext", days[Number(el.ariaValueNow) - 1]);
console.log({
  ariaValueNow: el.ariaValueNow,
  ariaValueText: el.getAttribute("aria-valuetext")
});

{
  "ariaValueNow": "2",
  "ariaValueText": "Monday"
}

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

el.ariaValueNow = "2";
console.log({
  fromProperty: el.ariaValueNow,
  fromAttribute: el.getAttribute("aria-valuenow"),
  same: el.ariaValueNow === el.getAttribute("aria-valuenow")
});

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

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

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

🚀 Common Use Cases

• Updating a custom slider as the user drags or presses arrow keys.
• Progress bars reporting how far a task has completed.
• Day-of-week or rating pickers that change the current index.
• Keeping aria-valuetext in sync with the numeric value.
• 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: ariaValueMin, ariaValueMax, ariaValueText, EventTarget, JavaScript hub.

💡 Best Practices