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/

Rishu Arora
  • 3
  • 2

1 Answers1

0

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.

TJ VanToll
  • 12,584
  • 4
  • 43
  • 45
  • jQuery UI currently doesn't support touch events. I would recommend including jQuery UI Touch Punch to add support - http://touchpunch.furf.com/. – TJ VanToll May 15 '12 at 19:08
  • Thanks a lot TJ. Is there is way to make to make it work on Chrome and safari? They can render the border-radius property but overflow:hidden is not rendered by both. – Rishu Arora May 15 '12 at 20:53
  • I would appreciate if anyone can please help me with this. – Rishu Arora May 21 '12 at 13:39
  • This post has some suggestions - http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera. – TJ VanToll May 21 '12 at 13:43
  • Thanks again TJ but in my case the inner block is a slider and that's why it doesn't seem to work. Is there a way to share my code here so as to give a better understanding of the issue. I truly appreciate your effort sir. – Rishu Arora May 22 '12 at 14:55