Home/ Questions/Q 7937373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T22:30:29+00:00

I have to prototype a bulb shape (even an ellipse would be fine) vertical

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0