New pages: HTMLMeterElement properties

files/en-us/web/api/htmlmeterelement/high/index.md

@@ -0,0 +1,54 @@
+---
+title: "HTMLMeterElement: high property"
+short-title: high
+slug: Web/API/HTMLMeterElement/high
+page-type: web-api-instance-property
+browser-compat: api.HTMLMeterElement.high
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`high`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the high boundary of the {{htmlelement("meter")}} element as a `double`. It reflects the element's [`high`](/en-US/docs/Web/HTML/Element/meter#high) attribute, or the value of `max` if not defined. The value of `high` is clamped by the `low` and `max` values.
+
+This property can also be set directly, for example to set a default value based on some condition.
+
+## Value
+
+A number. The value of `high`, but not less than {{DOMxRef("HTMLMeterElement.low")}} nor greater than {{DOMxRef("HTMLMeterElement.max")}}.
+
+## Examples
+
+```html
+<label for="fuel">Current fuel level:</label>
+<meter
+  id="fuel"
+  min="0"
+  max="100"
+  low="15"
+  high="66"
+  optimum="80"
+  value="50"></meter>
+```
+
+```js
+const meterElement = document.getElementById("fuel");
+console.log(meterElement.high); // 66
+++meterElement.high;
+console.log(meterElement.high); // 67
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("meter")}}
+- {{DOMXref("HTMLMeterElement.value")}}
+- {{DOMXref("HTMLMeterElement.max")}}
+- {{DOMXref("HTMLMeterElement.low")}}
+- {{DOMXref("HTMLProgressElement")}}

files/en-us/web/api/htmlmeterelement/low/index.md

@@ -0,0 +1,54 @@
+---
+title: "HTMLMeterElement: low property"
+short-title: low
+slug: Web/API/HTMLMeterElement/low
+page-type: web-api-instance-property
+browser-compat: api.HTMLMeterElement.low
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`low`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the low boundary of the {{htmlelement("meter")}} element as a `double`. It reflects the element's [`low`](/en-US/docs/Web/HTML/Element/meter#low) attribute, or the value of `min` if not defined. The value of `low` 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. The value of `low`, but not less than {{DOMxRef("HTMLMeterElement.min")}} nor greater than {{DOMxRef("HTMLMeterElement.max")}}.
+
+## Examples
+
+```html
+<label for="fuel">Current fuel level:</label>
+<meter
+  id="fuel"
+  min="0"
+  max="100"
+  low="15"
+  high="66"
+  optimum="80"
+  value="50"></meter>
+```
+
+```js
+const meterElement = document.getElementById("fuel");
+console.log(meterElement.low); // 15
+--meterElement.low;
+console.log(meterElement.low); // 14
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("meter")}}
+- {{DOMXref("HTMLMeterElement.value")}}
+- {{DOMXref("HTMLMeterElement.min")}}
+- {{DOMXref("HTMLMeterElement.high")}}
+- {{DOMXref("HTMLProgressElement")}}

files/en-us/web/api/htmlmeterelement/max/index.md

@@ -0,0 +1,53 @@
+---
+title: "HTMLMeterElement: max property"
+short-title: max
+slug: Web/API/HTMLMeterElement/max
+page-type: web-api-instance-property
+browser-compat: api.HTMLMeterElement.max
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`max`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the maximum value of the {{htmlelement("meter")}} element as a `double`. It reflects the element's [`max`](/en-US/docs/Web/HTML/Element/meter#max) attribute, or the `min` value if no `max` is set, or `1` if neither the `min` or the `max` is defined.
+
+This property can also be set directly, for example to set a default value based on some condition.
+
+## Value
+
+A number. The value of `max`, or the value of {{DOMxRef("HTMLMeterElement.min")}} or `1` if not defined.
+
+## Examples
+
+```html
+<label for="fuel">Current fuel level:</label>
+<meter
+  id="fuel"
+  min="0"
+  max="100"
+  low="15"
+  high="66"
+  optimum="80"
+  value="50"></meter>
+```
+
+```js
+const meterElement = document.getElementById("fuel");
+console.log(meterElement.max); // 100
+--meterElement.max;
+console.log(meterElement.max); // 99
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("meter")}}
+- {{DOMXref("HTMLMeterElement.value")}}
+- {{DOMXref("HTMLMeterElement.min")}}
+- {{DOMXref("HTMLProgressElement")}}

files/en-us/web/api/htmlmeterelement/min/index.md

@@ -0,0 +1,53 @@
+---
+title: "HTMLMeterElement: min property"
+short-title: min
+slug: Web/API/HTMLMeterElement/min
+page-type: web-api-instance-property
+browser-compat: api.HTMLMeterElement.min
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`min`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the mimimum value of the {{htmlelement("meter")}} element as a number. It reflects the element's [`min`](/en-US/docs/Web/HTML/Element/meter#min) attribute, or `0` if no `min` is defined.
+
+This property can also be set directly, for example to set a default value based on some condition.
+
+## Value
+
+A number.
+
+## Examples
+
+```html
+<label for="fuel">Current fuel level:</label>
+<meter
+  id="fuel"
+  min="0"
+  max="100"
+  low="15"
+  high="66"
+  optimum="80"
+  value="50"></meter>
+```
+
+```js
+const meterElement = document.getElementById("fuel");
+console.log(meterElement.min); // 0
+++meterElement.min;
+console.log(meterElement.min); // 1
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("meter")}}
+- {{DOMXref("HTMLMeterElement.value")}}
+- {{DOMXref("HTMLMeterElement.max")}}
+- {{DOMXref("HTMLProgressElement")}}

files/en-us/web/api/htmlmeterelement/optimum/index.md

@@ -0,0 +1,51 @@
+---
+title: "HTMLMeterElement: optimum property"
+short-title: optimum
+slug: Web/API/HTMLMeterElement/optimum
+page-type: web-api-instance-property
+browser-compat: api.HTMLMeterElement.optimum
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`optimum`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the optimum boundary of the {{htmlelement("meter")}} element as a `double`. It reflects the element's [`optimum`](/en-US/docs/Web/HTML/Element/meter#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. The value of `optimum`, or the midpoint between {{DOMxRef("HTMLMeterElement.min")}} and {{DOMxRef("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
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("meter")}}
+- {{DOMXref("HTMLMeterElement.value")}}
+- {{DOMXref("HTMLMeterElement.high")}}
+- {{DOMXref("HTMLMeterElement.low")}}
+- {{DOMXref("HTMLProgressElement")}}

files/en-us/web/api/htmlmeterelement/value/index.md

@@ -0,0 +1,52 @@
+---
+title: "HTMLMeterElement: value property"
+short-title: value
+slug: Web/API/HTMLMeterElement/value
+page-type: web-api-instance-property
+browser-compat: api.HTMLMeterElement.value
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`value`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the current value of the {{htmlelement("meter")}} element as a `double`. It reflects the element's [`value`](/en-US/docs/Web/HTML/Element/meter#value) attribute. If no `value` is set, the {{DOMxRef("HTMLMeterElement.min")}} value or `0`, whichever is greater.
+
+This property can also be set directly, for example to set a default value based on some condition.
+
+## Value
+
+A number. The value of `value`, or either {{DOMxRef("HTMLMeterElement.min")}} or `0`, whichever if greater, if not defined.
+
+## Examples
+
+```html
+<label for="fuel">Current fuel level:</label>
+<meter
+  id="fuel"
+  min="0"
+  max="100"
+  low="15"
+  high="66"
+  optimum="80"
+  value="50"></meter>
+```
+
+```js
+const meterElement = document.getElementById("fuel");
+console.log(meterElement.value); // 50
+--meterElement.value;
+console.log(meterElement.value); // 49
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("meter")}}
+- {{DOMXref("HTMLMeterElement.min")}}
+- {{DOMXref("HTMLProgressElement")}}