Question:
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.
Solution:1
You can make the indicator by a simple div with background image, positioned by JS.
- create a div
- set the height / width
- set a bg image
- calculate the position of the bg image based on the values
- set the
background-positioncss property form the result
Solution:2
I think you can checkout this widget
http://david.dupplaw.me.uk/developer/jquery-thermometer
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
EmoticonEmoticon