jquery Progress Bar

Skin to match the zoom slider

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<div id="mapZoom">
    <div class="mapLabel" id="mapZoomInLabel">+</div>
    <div class="mapLabel" id="mapZoomOutLabel">-</div>

    <div id="slider-vertical"></div>
</div>

<div id="target"></div>

 <input type="text" id="amount" style="border: 0; color: #f6931f; width:37px; font-weight: bold; text-align:center;" />

<div id="progressBar" class="ui-progressbar"></div>

CSS

.ui-corner-all{
    -webkit-border-radius:.4em .4em .4em .4em/.4em;
	-moz-border-radius: .4em .4em .4em .4em/.4em;
	border-radius:.4em;
}
.ui-progressbar {
	height: .5em;
    width:20em;
	text-align: left;
	overflow: hidden;
    -gradient(right, rgba(0,0,0,.2), rgba(255,255,255,.2));
	background-image: -moz-linear-gradient(right, rgba(0,0,0,.2), rgba(255,255,255,.4));
	background-image: -o-linear-gradient(right, rgba(0,0,0,.2), rgba(255,255,255,.4));
	background-image: -ms-linear-gradient(right, rgba(0,0,0,.2), rgba(255,255,255,.4));
	background-image: linear-gradient(to left, rgba(0,0,0,.2), rgba(255,255,255,.4));
    border: solid 1px #848484;
    	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 2px rgba(255,255,255,.5);
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 2px rgba(255,255,255,.5);
	box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 2px rgba(255,255,255,.5);
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
    
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background-image: -o-linear-gradient(bottom, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background-image: linear-gradient(to top, rgba(0,0,0,.4), rgba(255,255,255,.4));
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("images/animated-overlay.gif");
	height: 100%;
	filter: alpha(opacity=5);
	opacity: 0.5;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}

/* zoom slider */
#target{
    position:absolute;
    left:100px;
    top:100px;  
    background-color:blue;
}

.ui-slider {
	position: relative;
	text-align: left;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background-image:...

JavaScript

var targetZoom; 
var readout;
var mapZoomSlider;
var box;
var initVal = 60;

$(function() {
    // progress bar //
    $("#progressBar").progressbar({
      value:  initVal,
        max:100
    });
    // zoom slider //
    mapZoomSlider= $("#slider-vertical");
    readout =  $( "#amount" );
    readout.val(initVal);
    box= $(target);
    progressBar = $("#progressBar");
    box.css('width',initVal);
    box.css('height',initVal);
    mapZoomSlider.slider({
      orientation: "vertical",
      range: "min",
      min: 0,
      max: 100,
      value: initVal,
      slide: function( event, ui ) {
          readout.val( ui.value );
          targetZoom = (ui.value);
          box.css('width', readout.val());
          box.css('height', readout.val());
          progressBar.progressbar("option", "value", parseInt(readout.val()));
      } 
  });
});