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 October 2018.

The optimum property of the HTMLMeterElement interface represents the optimum boundary of the <meter> element as a floating-point number. It reflects the element's optimum attribute, or the midpoint between min and max values if not defined. The value of optimum is clamped by the min and max 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 between HTMLMeterElement.min and HTMLMeterElement.max if not defined.

Examples

In this example, no optimum value is set.

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

Though not explicitly defined, the default optimum is the midpoint between min and max, but can be set to any value between min and max, inclusive.

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

Specifications

Specification
HTML
# dom-meter-optimum

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
optimum

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also