JSFiddle - React, Tailwind, and code Playground

by Robert Tome

HTML

<body>
  <p>Meter gauge :</p>
  <meter id='meter1' value="5" min="0" max="10">2 out of 10</meter>
  <br>
  <button id="plus-it">
    +
  </button>
  <button id="minus-it">
   - 
  </button>
</body>

JavaScript

$( "#plus-it" ).bind( "click", function() {
  val = $('#meter1').val();
  val++;
  $('#meter1').val(val);
  if ( val > 10 ) {
    val = 10;
    $('#meter1').css('border', '3px dash red');
  }
  else {
      $('#meter1').css('border', '3px dash transparent');
  }
});

$( "#minus-it" ).bind( "click", function() {
  val = $('#meter1').val();
  val--;
  if ( val < 0 ) {
    val = 0;
  }
  $('#meter1').val(val);
});