แอตทริบิวต์ low: กำหนดช่วงค่าต่ำใน Meter/Gauge ใน HTML

แอตทริบิวต์ low ใช้ในแท็ก <meter> เพื่อกำหนดค่าที่ถือว่าเป็น "ต่ำ" (Low Threshold) ทำงานร่วมกับ high, optimum, min, max เพื่อสร้าง Gauge Visualization

โครงสร้าง Meter Attributes

การตีความโซน (Zones) - สำคัญ

ค่าที่ Optimum ต่ำกว่า Low:   min --- low --- optimum --- high --- max
                               [HIGH]   [OPTIMUM]   [LOW]      (กลับกัน)

ค่าที่ Optimum ระหว่าง Low-High: min --- low --- optimum --- high --- max
                                   [LOW]    [OPTIMUM]    [HIGH]

ค่าที่ Optimum สูงกว่า High:   min --- low --- high --- optimum --- max
                                   [LOW]    [HIGH]      [OPTIMUM]

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
    <title>ตัวอย่าง HTML meter Tag</title>
</head>
<body>
    <h3>Gauge ตัวอย่าง</h3>
    <p>คะแนน: <meter value="6" high="9" low="5" min="0" max="10">6 out of 10</meter></p>
    <p>ระดับน้ำ: <meter value="75" min="0" low="30" high="80" optimum="60" max="100">75%</meter></p>
    <p>CPU: <meter value="85" min="0" max="100" low="30" high="70" optimum="20">85%</meter></p>
</body>
</html>

Meter vs Progress

การจัดสไตล์ Meter (CSS)

meter {
    width: 100%; height: 20px;
    -webkit-appearance: none; appearance: none;
    border-radius: 10px; overflow: hidden;
}
meter::-webkit-meter-bar { background: #eee; }
meter::-webkit-meter-optimum-value { background: #4CAF50; }
meter::-webkit-meter-suboptimum-value { background: #FFC107; }
meter::-webkit-meter-even-less-good-value { background: #F44336; }

/* Firefox */
meter::-moz-meter-bar { border-radius: 10px; }
meter:-moz-meter-optimum::-moz-meter-bar { background: #4CAF50; }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #FFC107; }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #F44336; }