Color linked to value in Jquery UI Progressbars

This is a example on how to dynamically change the color according to the value of the Jquery UI Progressbar

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<body>
  <div class="progressbar"></div>
  <div class="progressbar"></div>
  <div class="progressbar"></div>
  <button id="numButton">Random Values on Progress Bars</button>
</body>

JavaScript

$(function() {
	// Iterate throw all the progressbars to initialize them and bind the change event to the function that asigns the color depending on the value
  $( ".progressbar" ).each(function(i, obj) {
    $( this ).progressbar();
		$( this ).bind('progressbarchange', function(event, ui) {
        updateColor( this );
    });
  });
	
	//when the button is pressed, the value for of all the progress bars changes randomly
  $( "button" ).on("click", function(event) {
    $( ".progressbar" ).each(function(i, obj) {
      $( this ).progressbar("option", {
        value: Math.floor(Math.random() * 100)
      });
    });
  });
});

// this function asigns color depending on value
function updateColor( progressBar ) {
    var value = $( progressBar ).progressbar("value");
    if ( value > 50 ) {
      progressColor = "green";
    } else if (value > 10) {
      progressColor = "#FF9900";
    } else {
      progressColor = "red";
    }
    $( progressBar ).find(".ui-progressbar-value").css("background", progressColor);
}