HTML high एट्रिब्यूट: मीटर गेज में उच्च मान सीमा सेट करना

HTML high एट्रिब्यूट एक गेज के साथ उपयोग किया जाता है ताकि उस गेज का उच्च मान निर्दिष्ट किया जा सके। बेहतर परिणामों के लिए इसे गेज के max, min, low एट्रिब्यूट्स के साथ उपयोग करें।

उदाहरण: स्वास्थ्य जोखिम मीटर

<!DOCTYPE html>
<html>
<head>
  <title>मीटर high</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>मीटर-high</legend>
      <label for="paulaLifeSource">पाउला का स्वास्थ्य जोखिम: </label>
      <meter id="paulaLifeSource" max="100" min="0" high="80" low="70" value="85"></meter>
      <input type="button" onclick="lifeSource()" value="मेडी किट">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = 'लाइफ सोर्स ' + paulaLifeSource.value + ' पर';
    function lifeSource(effect) {
      var paulaLifeSource = document.getElementById("paulaLifeSource");
      var Immunity = paulaLifeSource.high;
      paulaLifeSource.high = 90;
      divDisplay.textContent = 'इम्युनिटी बढ़कर ' + paulaLifeSource.high + ' हो गई ' + Immunity + ' से';
    }
  </script>
</body>
</html>

आउटपुट परिदृश्य

1. 'मेडी किट' बटन से पहले: मीटर high=80, value=85 दिखाता है (लाल/उच्च क्षेत्र में)
2. 'मेडी किट' बटन के बाद: high 90 हो जाता है, value 85 अब सामान्य क्षेत्र में (हरा)

मीटर एट्रिब्यूट्स की पूरी व्याख्या

रेंज तर्क

• min ≤ low ≤ high ≤ max होना चाहिए
• value < low: "कम" क्षेत्र (आमतौर पर पीला/लाल)
• low ≤ value ≤ high: "सामान्य" क्षेत्र (आमतौर पर हरा)
• value > high: "उच्च" क्षेत्र (आमतौर पर लाल)
• optimum क्षेत्र को इंगित करता है (ब्राउज़र स्टाइलिंग प्रभावित कर सकता है)