Tutorial :Fundraising Thermometer Approach


I need to create a thermometer type widget for a website, where I can feed in a goal and current amount, then generate a graphic that shows the progress. I was thinking something with jQuery/CSS would be the best approach, but then I started thinking maybe just using a vertical slider from the jQuery UI library and skinning it. How would you all approach this? I've looked for a plugin but haven't come across anything relevant.


You can make the indicator by a simple div with background image, positioned by JS.

  1. create a div
  2. set the height / width
  3. set a bg image
  4. calculate the position of the bg image based on the values
  5. set the background-position css property form the result


I think you can checkout this widget


Though in the current version if you change the lower value to anything other than zero the UI is not updated perfectly. The corrected version can be found:


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »