Att Meter Low

## HTML `` `low` Attribute The `low` attribute of the HTML `` element specifies the range boundary that is considered a "low" value. The `` element represents a scalar measurement within a known range, or a fractional value (such as disk usage or query results). By defining a `low` threshold, you can visually indicate when a measured value has dropped into a low range. --- ## Browser Support The `low` attribute is widely supported by all modern web browsers: * **Google Chrome**: Supported * **Mozilla Firefox**: Supported * **Microsoft Edge**: Supported * **Safari**: Supported * **Opera**: Supported *Note: Internet Explorer does not support the `` tag or its attributes.* --- ## Definition and Usage The `low` attribute defines the upper bound of the "low" range of the gauge. ### Key Rules for Value Ranges: To ensure the `` element renders correctly, the value of the `low` attribute must adhere to the following mathematical constraints: 1. It must be greater than the `min` attribute value (if specified). 2. It must be less than the `high` attribute value (if specified). 3. It must be less than the `max` attribute value (if specified). ### Visual Behavior: Browsers dynamically change the color of the meter bar (typically between green, yellow, and red) depending on how the current `value` relates to the `low`, `high`, `optimum`, `min`, and `max` attributes. For example, if the `optimum` value is set high (e.g., near `max`), any current `value` that falls below the `low` threshold will often be colored yellow or red to warn the user of a low state. --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *number* | A floating-point number representing the upper boundary of the low range. | --- ## Code Examples ### Example 1: Basic Usage of the `low` Attribute In this example, we define a gauge with a range of 0 to 100. The low threshold is set to 40, the high threshold is set to 90, and the current value is 95 (which is in the high range). ```html

Disk Space Usage:

``` ### Example 2: Visualizing Low, Medium, and High States By changing the relationship between the `value`, `low`, `high`, and `optimum` attributes, you can see how browsers change the color of the meter: ```html

Battery Level (Low):

Battery Level (Normal):

Battery Level (Full):

``` --- ## Technical Considerations * **HTML5 Standard**: The `` element and its `low` attribute were introduced in HTML5. * **Difference from ``**: Do not use `` to represent progress (e.g., a loading bar). Use the `` element for progress-related tasks, and use `` only for static measurements within a defined range. * **Accessibility**: Always include text content inside the `` tags for older browsers that do not support the element, and to assist screen readers. For example: ```html 25% (Low) ```

YouTip

Att Meter Low

📂 Categories