This is an experiment with non-standard progress bar (circled) for mobile webkit browser (ONLY, but you can easily make it cross-browser). I've explained internals of the control in my two blog posts:
http://podlipensky.com/2011/10/css-3-volume-control-part-1/
http://podlipensky.com/2011/11/css3-volume-control-part-2/

Please note that this is not a real-world control, but just an experiment with CSS3 and some mobile-related tricks. Feel free to adjust and reuse the control if needed. 
Any feedback appreciated.