is there anyway to have jquery ui progress bar show up vertical?

Question

i want a progress bar to show percentfilled but i want to make it vertical like a thermometer like this below. is this possible with an option on Jquery UI progress bar? I want something that looks like this http://magellanband.files.wordpress.com/2009/05/fundraiser-goal-thermometer-thumb7625364.jpg

Answer 1

There is a plugin, but I haven't used it so I don't know if you can adapt it.

Or, you could just make your own using HTML & CSS. I made a demo here where I added a jQuery UI Slider to control the look of the bar. Here is the basic code (just for the bar)

HTML

<div class="progressbar">
 <span class="progressbar-value">
  <em class="progressbar-cover"></em>
 </span>
</div>

CSS

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

Answer 2

There's no option currently, but it would be easy to modify the widget to do what you want. The progressbar source is clear, just alter the _refreshValue() function at the bottom and fiddle with the css a bit. Good luck!