JavaScript Element ariaValueNow Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIAVALUENOW

Definition

Element.ariaValueNow reflects the aria-valuenow attribute: the current value of a range widget such as a slider, scrollbar, or spinbutton (MDN). The value is a string number between min and max.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaValueNow. Start with this line.

JavaScript
el.ariaValueNow / el.ariaValueNow = value
CallWhat it does
el.ariaValueNow / el.ariaValueNow = valuePrimary signature.

Built into the browser. Read or assign el.ariaValueNow — no import required.

Library declarations
JavaScript
el.ariaValueNow / el.ariaValueNow = value

Parameters

ParameterDescription
Range widgetRequired. slider / scrollbar / spinbutton / meter…
String numberOptional. Current value between min and max
ariaValueTextOptional. Human-friendly announcement (MDN)

Return Value

Return ValueDescription
*The current value of el.ariaValueNow.

JavaScript Examples

Example 1 — Read ariaValueNow

Log the current value from a day-of-week slider.

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

// HTML: role="slider" aria-valuenow="1" …
Try It Yourself

How It Works

  1. Find the slider. getElementById returns the range widget node.
  2. Read the reflection. ariaValueNow returns the aria-valuenow string.
  3. Interpret "1". Assistive technologies treat 1 as the current value.
  4. Missing attribute. If unset, many browsers return null (no known value).

Example 2 — Update the Current Value (MDN)

MDN: change the reported value from "1" to "2".

JavaScript
const el = document.getElementById("slider");

console.log(el.ariaValueNow); // "1"
el.ariaValueNow = "2";
console.log(el.ariaValueNow); // "2"
console.log(el.getAttribute("aria-valuenow")); // "2"
Try It Yourself

How It Works

  1. Start at 1. The first log shows the initial current value.
  2. Assign a string. el.ariaValueNow = "2" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "2".
  4. In a real UI. Clamp to min/max and update any visible thumb / label.

Example 3 — Sync ariaValueText

When the number alone is unclear, update a friendly label too.

JavaScript
const days = ["", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const el = document.getElementById("slider");
const next = 2;

el.ariaValueNow = String(next);
el.ariaValueText = days[next];

console.log(el.ariaValueNow);  // "2"
console.log(el.ariaValueText); // "Monday"
Try It Yourself

How It Works

  1. Keep a numeric now. ariaValueNow stays a number string for the range model.
  2. Map to a label. Day 2 becomes "Monday".
  3. Set valuetext. When present, assistive technologies announce the text instead of the raw number (MDN).
  4. Update both together. Every time now changes, refresh ariaValueText too.
Compatibility

Browser Support

Element.ariaValueNow is Baseline Widely available (MDN: across browsers since October 2023).

✓ Baseline · Widely available

Element.ariaValueNow

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no ariaValueNow IDL — use getAttribute / setAttribute there.

95% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.ariaValueNow Excellent

Bottom line: Safe for modern web apps. Prefer native value when you can; for custom widgets keep now between min and max, and add valuetext when needed.

Frequently Asked Questions

It reflects the aria-valuenow attribute as a string number that defines the current value for a range widget such as a slider, scrollbar, spinbutton, meter, or progressbar.
No. MDN marks Element.ariaValueNow as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
A string containing a decimal number between aria-valuemin and aria-valuemax.
When there is no known value — for example an indeterminate progress bar. If aria-valuenow is not set, no current value is implied (MDN).
No. MDN warns that the abstract range role should not be used. Use a concrete subtype such as slider, scrollbar, or spinbutton.
When the number alone is unclear. For a day-of-week slider, keep ariaValueNow as "1" and set ariaValueText to "Sunday" so assistive technologies announce the friendly label (MDN).

Next: ariaValueText

Learn the reflected aria-valuetext property for a human-friendly label of the current range value.

ariaValueText tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

14 people found this page helpful

JavaScript Element ariaValueMin Property JavaScript Element ariaValueText Property