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
HTML min Attribute
The min attribute in HTML defines the minimum value of the range for the <meter> element. The <meter> element represents a scalar value within a known range or a fractional value, such as disk usage, temperature readings, or progress indicators.
Syntax
Following is the syntax for the min attribute −
<meter min="number"></meter>
Where number is a floating-point value that sets the lower bound of the range. The min value must be less than the max value, and the default value is 0 if not specified.
Parameters
The min attribute accepts the following parameter −
number − A floating-point number that specifies the minimum value of the gauge. This value must be less than the max attribute value.
How the Meter Element Works
The <meter> element uses several attributes to define its range and thresholds −
min − The minimum value of the range (default: 0)
max − The maximum value of the range (default: 1)
value − The current numeric value
low − The upper boundary of the low range
high − The lower boundary of the high range
optimum − The optimal value within the range
Example − Basic Water Level Meter
Following example shows the min attribute used with a water impurity level meter −
<!DOCTYPE html>
<html>
<head>
<title>Water Level Meters</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Water Quality Measurements</h2>
<p><strong>Impurity Level:</strong>
<meter min="0" low="50" high="95" max="100" value="85">85%</meter>
85%
</p>
<p><strong>TDS Level:</strong>
<meter min="0" low="20" high="80" max="100" value="60">60%</meter>
60%
</p>
<p><strong>pH Level:</strong>
<meter min="0" low="6" high="8" max="14" value="7.2" optimum="7">7.2</meter>
7.2
</p>
</body>
</html>
The output displays three different meter gauges with their respective minimum values set using the min attribute −
Water Quality Measurements Impurity Level: [========85%=======] 85% TDS Level: [======60%==== ] 60% pH Level: [===7.2=== ] 7.2
Example − Temperature Range
Following example demonstrates using the min attribute for temperature measurements −
<!DOCTYPE html>
<html>
<head>
<title>Temperature Meters</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Room Temperature Monitoring</h2>
<p><strong>Living Room:</strong>
<meter min="10" low="18" high="25" max="35" value="22" optimum="21">22°C</meter>
22°C
</p>
<p><strong>Kitchen:</strong>
<meter min="10" low="18" high="25" max="35" value="26">26°C</meter>
26°C
</p>
<p><strong>Bedroom:</strong>
<meter min="10" low="18" high="25" max="35" value="20">20°C</meter>
20°C
</p>
</body>
</html>
In this temperature example, all meters have a minimum value of 10°C, representing the lowest expected temperature in the monitoring range.
Room Temperature Monitoring Living Room: [====22°C==========] 22°C Kitchen: [======26°C========] 26°C Bedroom: [==20°C============] 20°C
Example − Storage Capacity
Following example shows the min attribute used for storage capacity meters −
<!DOCTYPE html>
<html>
<head>
<title>Storage Capacity</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Disk Usage Monitor</h2>
<p><strong>C: Drive:</strong>
<meter min="0" low="70" high="90" max="100" value="45">45GB used</meter>
45GB used
</p>
<p><strong>D: Drive:</strong>
<meter min="0" low="70" high="90" max="100" value="85">85GB used</meter>
85GB used
</p>
</body>
</html>
Here, the min attribute is set to 0, indicating that disk usage starts from 0GB and can go up to the maximum capacity.
Disk Usage Monitor C: Drive: [====45GB==== ] 45GB used D: Drive: [========85GB======] 85GB used
Key Points
The min attribute value must be less than the max attribute value.
If the min attribute is not specified, the default value is 0.
The min value defines the lower boundary of the entire measurement range.
When the current value equals the min value, the meter typically shows an empty or minimal visual representation.
The min attribute accepts floating-point numbers, allowing for precise measurements.
Browser Compatibility
The min attribute for the <meter> element is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. However, Internet Explorer does not support the <meter> element.
Conclusion
The min attribute is essential for defining the lower bound of the <meter> element's range. It works together with max, low, high, and optimum attributes to create meaningful visual representations of scalar values. Always ensure the min value is less than the max value for proper meter functionality.
197 Views
