JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<div id="progressbar"><div class="progress-label"></div></div>

CSS

.ui-progressbar {
    position: relative;
  }
  .progress-label {
    position: absolute;
    left: 50%;
    font-size: 8px;
  }

JavaScript

$( "#progressbar" ).progressbar({
    max: 9,
    value: 5
    });
var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );
progressbar.progressbar({
      value: 1,
    max: 9,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "/" + progressbar.progressbar( "option", "max" ) );
      },
      complete: function() {
        progressLabel.text( "Complete!" );
      }
    });
progressbar.progressbar( "value", 2 );
progressbar.css('height','10');