Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we set the range that is considered to be of low value in HTML?
The low attribute in HTML defines the range that is considered to be of low value in a gauge. It works exclusively with the <meter> element to set the threshold below which values are considered low. The low attribute helps browsers visually indicate when a meter's value falls within the low range, typically by changing the gauge's color or appearance.
Note − The low attribute can only be used with the <meter> tag.
Syntax
Following is the syntax for the low attribute −
<meter low="number">Content</meter>
Parameters
The low attribute accepts the following parameter −
number − A floating-point number that specifies the upper boundary of the low range. This value must be greater than the
minattribute, less than themaxattribute, and less than or equal to thehighattribute.
How It Works
The <meter> element represents a scalar measurement within a known range. The low attribute works alongside other attributes to define different ranges −
min − The minimum value of the range
max − The maximum value of the range
low − The upper boundary of the low range
high − The lower boundary of the high range
value − The current value being measured
Example − Basic Low Attribute Usage
Following example demonstrates the low attribute with different score ranges −
<!DOCTYPE html>
<html>
<head>
<title>HTML Low Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Performance Scores</h2>
MSD Score:
<meter value="3" low="2" min="0" max="10" high="6">
3 out of 10
</meter>
<br><br>
ABD Score:
<meter value="0.5" low="0.3" max="1.0" min="0" high="0.6">
50% from 100%
</meter>
<br><br>
<p>Values below the 'low' threshold appear in a different color.</p>
</body>
</html>
The output displays two gauge meters. The first shows a score of 3, which is above the low threshold of 2. The second shows 0.5, which is above its low threshold of 0.3 −
Performance Scores MSD Score: [??????????] 3 out of 10 ABD Score: [??????????] 50% from 100% Values below the 'low' threshold appear in a different color.
Example − Water Level Indicator
Following example shows a practical use case for monitoring water levels −
<!DOCTYPE html> <html> <head> <title>Water Level Monitor</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Tank Water Levels</h2> Tank A: <meter value="6" high="9" low="3" min="0" max="10">6 out of 10</meter> (Normal Level) <br><br> Tank B: <meter value="2" high="9" low="3" min="0" max="10">2 out of 10</meter> (Low Level - Needs Refill) <br><br> Tank C: <meter value="9.5" high="9" low="3" min="0" max="10">9.5 out of 10</meter> (High Level) <p>Tank B shows a low water level warning since its value (2) is below the low threshold (3).</p> </body> </html>
The output shows three tank levels with different visual indicators based on their values relative to the low and high thresholds −
Tank Water Levels Tank A: [??????????] 6 out of 10 (Normal Level) Tank B: [??????????] 2 out of 10 (Low Level - Needs Refill) Tank C: [??????????] 9.5 out of 10 (High Level) Tank B shows a low water level warning since its value (2) is below the low threshold (3).
Example − Battery Level Indicator
Following example demonstrates using the low attribute for battery level monitoring −
<!DOCTYPE html> <html> <head> <title>Battery Level Monitor</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Device Battery Levels</h2> <p>Phone: <meter value="85" low="20" high="80" min="0" max="100">85%</meter> 85%</p> <p>Laptop: <meter value="45" low="20" high="80" min="0" max="100">45%</meter> 45%</p> <p>Tablet: <meter value="15" low="20" high="80" min="0" max="100">15%</meter> 15% (Low Battery!)</p> <p>The tablet battery is below the low threshold (20%) and should be charged soon.</p> </body> </html>
The tablet shows a low battery warning since its value (15%) is below the low threshold of 20% −
Device Battery Levels Phone: [??????????] 85% Laptop: [??????????] 45% Tablet: [??????????] 15% (Low Battery!) The tablet battery is below the low threshold (20%) and should be charged soon.
Key Points
The low attribute must be a valid floating-point number.
The value must satisfy: min
When a meter's value is below the low threshold, browsers typically display it with a warning color (often red or yellow).
The low attribute is optional; if omitted, there's no specific low range defined.
Different browsers may render low values with different visual cues.
Conclusion
The low attribute in HTML's <meter> element defines the upper boundary of values considered to be in the low range. It helps create visual indicators for gauges, progress bars, and measurement displays where low values need special attention. When combined with other meter attributes, it provides an effective way to represent scalar measurements with meaningful visual feedback.
261 Views
