JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>

CSS

#custom-handle {
    width: 100px;
    height: 1.6em;
    top: 6px;
    margin-top: 0;
    margin-left:-50px;
    text-align: center;
    line-height: 1.6em;
    font-size:11px;
  }
  body{padding:20px 30px;}
  #slider{height:20px;}

JavaScript

$( function() {
    var handle = $( "#custom-handle" );
    $( "#slider" ).slider({
    range: "min",
      create: function() {
        handle.text( 'total ' + $( this ).slider( "value" ) + '%' );
      },
      slide: function( event, ui ) {
        handle.text( 'total ' + ui.value + '%' );
      }
    });
  } );