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: 20px;
 width: 50%;
 border: silver 4px solid;
 margin: 0;
 padding: 0;
}
.ui-progressbar-value {
 height: 20px;
 margin: 0;
 padding: 0;
 text-align: right;
 background: #080;
 width: 10%;
}
.ui-progressbar-text {
 position: relative;
 top: -3px;
 left: 0;
 padding: 0 5px;
 font-size: 14px;
 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 < 20) ? ['#f00','#000'] : ['#ff0','#000'];
            colors = (ui.value > 50 && ui.value < 100) ? ['#080','#fff'] : colors; 
            colors = (ui.value > 100) ? ['#808','#fff'] : colors;
            $(".ui-progressbar-value").css({'width' : ui.value + "%", 'backgroundColor' : colors[0] });
            $(".ui-progressbar-text").css('color', colors[1]).text(ui.value + "%");
        }
    });
 
});