JavaScript Element ariaValueMin Property

What You’ll Learn

Element.ariaValueMin is an instance property that reflects the aria-valuemin attribute. Learn how it declares the minimum 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 minimum so they can announce the scale (for example “1 to 7”).

aria-valuemin declares that floor. The DOM property ariaValueMin lets you read and update it from JavaScript.

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

Understanding the Property

MDN: the ariaValueMin property of the Element interface reflects the value of the aria-valuemin attribute, which defines the minimum allowed value for a range widget.

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

📝 Syntax

ariaValueMin

Value

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

📋 MDN Slider Example Shape

MDN starts with a slider marked aria-valuemin="1", then updates ariaValueMin 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.ariaValueMin); // "1"
el.ariaValueMin = "2";
console.log(el.ariaValueMin); // "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: ariaValueMin. Labs use a role="slider" so you can safely read and write the property.

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

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

1

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

1
2

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

el.ariaValueMin = "3";
const now = Number(el.getAttribute("aria-valuenow"));
const min = Number(el.ariaValueMin);
if (now < min) {
  el.setAttribute("aria-valuenow", String(min));
}
console.log({
  ariaValueMin: el.ariaValueMin,
  ariaValueNow: el.getAttribute("aria-valuenow")
});

{
  "ariaValueMin": "3",
  "ariaValueNow": "3"
}

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

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

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

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

{
  "supported": true,
  "pairWith": ["aria-valuemax", "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 and meters that start at a non-zero floor.
• Spinbuttons and day/week pickers with a fixed lower bound.
• Dynamically raising a range floor (for example starting later in a week).
• 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: ariaValueMax, ariaValueNow, EventTarget, JavaScript hub.

💡 Best Practices