html тег <meter> атрибут max

HTML

<p>У цьому прикладі, Ви можете змінювати значення для властивості value та max в межах від 0 до 100 переміщаючи повзунок.</p>
<p id="text">Поточне значення value: 20</p>
<p id="text1">Поточне значення max: 0</p>
value -> <input type="range" min="0" max="100" step="1" value="20" id="range" onmousemove="f()">  <br>
max -><input type="range" min="0" max="100" step="1" value="100" id="range1" onmousemove="f()">  
<p><meter value="20" min="0" max="100" id="meter">36,6 градусов</meter></p>

CSS

*{
  text-align:center;
}

JS

function f() {
  var range = document.getElementById("range").value;
  var range1 = document.getElementById("range1").value;
  var element = document.getElementById("meter");
  var text = document.getElementById("text");
  var text1 = document.getElementById("text1");

  element.setAttribute("value", range);
  element.setAttribute("max", range1);
  text.innerHTML = "Поточне значення value:" + range;
  text1.innerHTML = "Поточне значення max:" + range1;
}
//# sourceURL=pen.js

HTML

<p>Приклад показує як змінюється заповненість в залежності від значенн max</p>
<p>max = 70, value = 50 --><meter value="50"  min="0" max="70" id="meter"></meter></p>
<p>max = 90, value = 50 --><meter value="50"  min="0" max="90" id="meter"></meter></p>
<p>max = 125, value = 50 --><meter value="50"  min="0" max="125" id="meter"></meter></p>
<p>max = 200, value = 50 --><meter value="50"  min="0" max="200" id="meter"></meter></p>

CSS

*{
  text-align:center;
}