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

แอตทริบิวต์ high ใช้ในแท็ก <meter> เพื่อกำหนดค่าที่ถือว่าเป็น "สูง" (High Threshold) ช่วยให้เบราว์เซอร์/ผู้ใช้ทราบว่าค่าปัจจุบันอยู่ในช่วงไหน (Low, Optimum, High)

โครงสร้าง <meter> และแอตทริบิวต์ที่เกี่ยวข้อง

การตีความโซน (Zones)

min=0, low=30, optimum=50, high=70, max=100

[LOW ZONE]      [OPTIMUM ZONE]      [HIGH ZONE]
0 ----- 30 ----- 50 ----- 70 ----- 100
|=======|=========|=========|=======|
  Low       Optimum       High
(แดง)      (เขียว)       (เหลือง/ส้ม)

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

<!DOCTYPE html>
<html>
<body>
    <p>ระดับน้ำ: 
        <meter min="0" low="40" high="80" optimum="60" max="100" value="75">75%</meter>
    </p>
    
    <p>CPU Usage: 
        <meter min="0" max="100" low="30" high="70" optimum="20" value="85">85%</meter> <span style="color:red">Critical!</span>
    </p>
    
    <p>คะแนนสอบ: 
        <meter min="0" max="100" low="50" high="80" optimum="90" value="92">92/100</meter> <span style="color:green">Excellent</span>
    </p>
</body>
</html>

การจัดสไตล์ Meter ด้วย CSS (Pseudo-elements)

meter {
    width: 200px; height: 20px;
    -webkit-appearance: none; /* Reset default */
}
meter::-webkit-meter-bar { background: #eee; border-radius: 10px; }
meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, #4CAF50, #8BC34A); border-radius: 10px; }
meter::-webkit-meter-suboptimum-value { background: linear-gradient(90deg, #FFC107, #FF9800); border-radius: 10px; }
meter::-webkit-meter-even-less-good-value { background: linear-gradient(90deg, #F44336, #E53935); border-radius: 10px; }

/* 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; }

หมายเหตุ: <meter> ใช้สำหรับค่าที่รู้ Min/Max แล้ว (Gauge) ส่วน <progress> ใช้สำหรับความคืบหน้า (Progress Bar)