jQuery UIのProgressBarの色をvalueによって変える

javascript

jQuery UIのProgressBarですが、valueの値によって色を変えたい場合どうするのかなと思って調べたら、そういうオプションってないみたいなので

http://jqueryui.com/demos/progressbar/

<script>
	$(function() {
		$( "#progressbar" ).progressbar({
			value: 37
		});
	});
</script>


普通は緑で、80を超えたらオレンジ、100だと赤にしたい場合の方法をを考えてみました。
大した方法じゃないですが、こんな感じでできました。
なお、ページのロード時に色が変わってればいいということで、progressbarchangeを拾ってどうこうとかは考えませんでした。
progressbarというかただの棒グラフですね



<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script>
      $(function(){

           $("#progressbar1").progressbar({ value: 50 });
           $("#progressbar2").progressbar({ value: 80 });
           $("#progressbar3").progressbar({ value: 100 });

           $("div[id^=progressbar]").each(function(){
                 var selector = $(this).find('div');
                 var value = this.getAttribute( "aria-valuenow" );

                 if (value == 100 ){
                      $(selector).css({ 'background': 'Red' });
                 } else if (value >= 80){
                      $(selector).css({ 'background': 'Orange' });
                 } else{
                      $(selector).css({ 'background': 'Green' });
                 }
           });
      });
    </script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/ui-lightness/jquery-ui.css"  type="text/css" media="all" />
    <style>
      div[id^=progressbar] {
        width: 400px;
        height: 10px;
        margin-bottom: 5px;
      }
    </style>
  </head>
  <body>
    <h1>jQuery UI Progress Bar</h1>
    <div>
      <div id='progressbar1'></div>
      <div id='progressbar2'></div>
      <div id='progressbar3'></div>
    </div>
  </body>
</html>