<pre contenteditable="">&lt;meter value=75 min=0 max=100 low=20 high=98&gt;75%&lt;/meter&gt;</pre>

​

<p>Grades: <meter id="meter2" value="75" min="0" max="100" low="60" high="100" optimum="100">75%</meter> 

<input min="0" max="100" value="75" id="meter2range" onchange="effect('meter2', 'meter2range')" type="range"> 

  <output id="meter2val"></output></p>

​

​

<pre contenteditable="">&lt;meter min=50 max=200 low=90 high=119 optimum=100&gt;&lt;/meter&gt;</pre>

​

<p>Blood Pressure: <meter id="meter3" value="125" min="50" max="200" low="90" high="119" optimum="100">125</meter> 

<input min="0" max="200" value="125" id="meter3range" onchange="effect('meter3', 'meter3range')" type="range"> 

  <output id="meter3val"></output></p>

 <script defer="defer">

 function effect(meter, meterrange) {

    var currVal = document.getElementById(meterrange).value;

    document.getElementById(meter).value =  currVal;

    document.getElementById(meter+ "val").innerHTML = currVal;

 }

 </script>