JSFiddle - React, Tailwind, and code Playground

by Talty09

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 class="progressbar">
 <span class="progressbar-value">
  <em class="progressbar-cover"></em>
 </span>
</div>

CSS

.progressbar {
 width: 25px;
 height: 215px;
 position: relative;
 background: url(http://i48.tinypic.com/290tvnk.png) no-repeat scroll 0pt 0pt transparent;
} 
.progressbar-value {
font-family: Segoe UI,Arial,sans-serif;
 position: absolute;
 display: block;
 margin: 0;
 border: 0;
 width: 15px;
 height: 200px;
 top: 7px;
 left: 5px;
 overflow: hidden;
 text-indent: -30px;
 background: url(http://i45.tinypic.com/minc5g.png) repeat scroll center center #0f0;
}
.progressbar-cover {
 position: absolute;
 display: block;
 width: 15px;
 height: 200px;
 border: 0;
 left: 0;
 bottom: 0%;
 background: url(http://i49.tinypic.com/1zwge3s.png) repeat-x scroll 0 0 transparent;
}

#slider { width: 200px; margin-left: 10px; }

JavaScript

$(function() {
 var bkcolor;
 $('#slider').slider({
  max  : 100,
  value: 0,
  slide: function(event, ui) {
   bkcolor = (ui.value < 25) ? '#0f0' :'#ff0';
   if (ui.value > 75) { bkcolor = '#f00'; }
   $('.progressbar-cover').css('bottom' , ui.value + '%');  // the cover controls the bar height
   $('.progressbar-value').css('backgroundColor' , bkcolor ); // value contains the bar color
  }
 });
});