HTMLMeterElement: optimum property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨November 2015⁩.

Theoptimum property of theHTMLMeterElement interface represents the optimum boundary of the<meter> element as a floating-point number. It reflects the element'soptimum attribute, or the midpoint betweenmin andmax values if not defined. The value ofoptimum is clamped by themin andmax values.

This property can also be set directly, for example to set a default value based on some condition.

Value

A number. Defaults to the midpoint betweenHTMLMeterElement.min andHTMLMeterElement.max if not defined.

Examples

In this example, nooptimum value is set.

html

<label for="review">Star rating:</label><meter min="0" max="10" low="2" high="8" value="9"></meter>

Though not explicitly defined, the defaultoptimum is the midpoint betweenmin andmax, but can be set to any value betweenmin andmax, inclusive.

const meterElement = document.getElementById("fuel");console.log(meterElement.optimum); // 5meterElement.optimum = (meterElement.max + meterElement.optimum) / 2;console.log(meterElement.optimum); // 7.5