HTML low Attribute

Introduction

The low attribute sets the upper bound of the low range on a <meter> element. It works only on <meter>—not on <input type="number">, range sliders, or other form controls. Together with min, max, high, optimum, and value, it helps browsers color-code gauge readings for test scores, fuel levels, battery indicators, and similar measurements.

What You’ll Learn

Purpose of low Attribute

The low attribute defines where the low (warning) region ends on a <meter> scale. Values at or below low fall into the low segment, which browsers typically render with a caution color. It does not set the meter’s minimum scale bound—that is what min does.

Use low alongside min, max, high, optimum, and value to create semantic gauges for quiz scores, fuel tanks, disk headroom, and similar measurements. When high is also set, the constraint is min ≤ low ≤ high ≤ max.

📝 Syntax

Add low to a <meter> element with a numeric value within the scale:

<!-- Test score: value in low segment -->
<label for="score">Quiz score:</label>
<meter
  id="score"
  value="35"
  min="0"
  max="100"
  low="40"
  high="70"
  optimum="85">35/100</meter>

<!-- Fuel gauge with low threshold -->
<meter value="18" min="0" max="100" low="25">18%</meter>

Syntax Rules

• low applies only to the <meter> element—not to <input>, <progress>, or other elements.
• The value must be a valid floating-point number within the meter’s scale defined by min and max.
• When high is set, ensure min ≤ low ≤ high ≤ max.
• low marks the upper bound of the low range—values at or below it enter the low (warning) segment.
• Pair with value (current reading), min/max (scale bounds), and optionally high and optimum.
• Use <progress> for completion bars; use <meter> for gauges with semantic thresholds.

💎 Values

The low attribute accepts a floating-point number representing a point on the meter scale:

• low="40" — Low range ends at 40 on a 0–100 scale. Values at or below 40 show in the low segment.
• low="25" — On a fuel gauge, readings of 25% or below trigger the low zone.
• low="0.3" — Valid on a 0–1 scale (default min/max when omitted).
• Attribute absent — No explicit lower-range threshold; browser uses default coloring based on value and optimum alone.

<!-- Full meter with all range attributes -->
<meter
  value="35"
  min="0"
  max="100"
  low="40"
  high="70"
  optimum="85">35/100</meter>

<!-- JavaScript: change low threshold -->
<script>
  var meter = document.getElementById("fuel");
  meter.low = 30;   // number property
</script>

Applicable Elements

low vs min vs high vs optimum on <meter>

low on <meter> vs min on <input>

Examples Gallery

Test score meter with low threshold, fuel gauge, and dynamic low updates with JavaScript.

<label for="score">Quiz score:</label>
<meter
  id="score"
  value="35"
  min="0"
  max="100"
  low="40"
  high="70"
  optimum="85">35/100</meter>

<label for="fuel">Fuel level:</label>
<meter
  id="fuel"
  value="18"
  min="0"
  max="100"
  low="25"
  high="75"
  optimum="80">18%</meter>

<label for="capacity">Storage free:</label>
<meter id="capacity" value="30" min="0" max="100" low="20">30%</meter>
<button type="button" id="raiseLow">Raise low to 35</button>

<script>
  document.getElementById("raiseLow").addEventListener("click", function () {
    var meter = document.getElementById("capacity");
    meter.low = 35;
  });
</script>

♿ Accessibility

• Label every meter with visible text — Use <label for="id"> paired with the meter’s id, or wrap the meter in a labeled container so users know what the gauge measures.
• Include fallback text inside <meter> — Browsers that do not support <meter> show the inner text (e.g. 35/100) instead of a blank element.
• Do not rely on color alone — Supplement meter color regions with visible numeric values or descriptive labels so color-blind users understand the reading.
• Announce changes when updating dynamically — If JavaScript changes value or low, consider an aria-live region for screen reader updates.
• Use <meter> for gauges, <progress> for completion — Picking the correct element gives assistive technology the right semantics.
• Keep scale attributes consistent — Ensure min, max, low, and high use the same units as value so readings make sense when spoken aloud.

💡 Best Practices