自定义形状垂直滑块

Question

我必须制作一个灯泡形状（即使是椭圆形也可以）的垂直滑块原型。我开始使用http://jqueryui.com/demos/slider/slider-vertical.html并将父元素的形状更改为所需（现在的椭圆形）形状。问题是，当我拖动滑块时，它以矩形方式生长，因此不会采用椭圆形状（因为它是父元素）。 你可以请建议，如果有更好的方法来实现这一点。如果这是正确的方法，那么我应该如何遮挡边缘的颜色以便使滑块背景也是椭圆的。

供参考的问题：http://share.axure.com/UMILTD/

Answer 1

我会建议实现与border-radius CSS属性这种效果。您可以设置父级的border-radius以创建形状，然后将它的overflow设置为hidden，以使其后面的矩形不显示。

我在这里有一个生动的例子 - http://jsfiddle.net/qUbZf/3/。 Chrome在处理溢出的方式上似乎存在一些问题，但在Firefox和IE9中看起来很好。

IE < 9不支持border-radius，但形状将简单回落到一个盒子，并仍然可用。