JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
<div id="slider"></div>
<br><br>

<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
 <div class="ui-progressbar-value ui-widget-header ui-corner-left">
  <span class="ui-progressbar-text">10%</span>
 </div>
</div>

CSS

.ui-progressbar {
 height: 7px;
 width: 12%;
 border: silver 3px solid;
 margin: 0;
 padding: 0;
}
.ui-progressbar-value {
 height: 8px;
 margin: 0;
 padding: 0;
 text-align: right;
 background: #6AA127;
 width: 10%;
}
.ui-progressbar-text {
 position: relative;
 top: -11px;
 left: 0;
 padding: 0 5px;
 font-size: 10px;
 font-weight: bold;
 color: #000;
}

#slider { width: 50% }

JavaScript

$(function() {
    var colors = [];
    $("#slider").slider({
        max  : 200,
        value: 10,
        slide: function(event, ui) {
            colors = (ui.value < 50) ? ['#9DC209','#000'] : colors;
            colors = (ui.value > 50 && ui.value < 80) ? ['#FDD017','#000'] : colors; 
            colors = (ui.value > 80 && ui.value < 100) ? ['#FBB917','#000'] : colors; 
            colors = (ui.value > 100) ? ['#F87217','#fff'] : colors;
			var wid = (ui.value < 120) ? ui.value : 120;
            $(".ui-progressbar-value").css({'width' : wid + "%", 'backgroundColor' : colors[0] });
			var val = (ui.value < 120) ? ui.value : "over 120";
            $(".ui-progressbar-text").css('color', colors[1]).text(val + "%");
        }
    });
 
});