I have to prototype a bulb shape (even an ellipse would be fine) vertical slider. I started with using http://jqueryui.com/demos/slider/slider-vertical.html and changed the shape of the parent element to the desired (ellipse for now) shape. The problem is that when I drag the slider it grows in rectangular manner and thus, doesn't take the elliptical shape (as it's parent element). Can you please suggest if there is a better way to achieve this. If this is the correct way then how should I mask off the color from the edges so as to make the slider background elliptical too.
For reference to the problem: http://share.axure.com/UMILTD/
I would recommend achieving this effect with the border-radius CSS property. You can set the border-radius of the parent to create the shape and then set its overflow to hidden to keep the rectangle behind it from showing through.
I have a live example of this here - http://jsfiddle.net/qUbZf/3/. There does seem to be some issue in Chrome with how the overflow is handled, but it looks fine in Firefox and IE9.
IE < 9 do not support border-radius, but the shape will simply fallback to a box and will still be usable.