jquery-ui - Can I give the horizontal slider css3 border radius?

Question

I have a JQUI slider here, sized with percentages. I can use the border radius to round the slider, but the range highlight doesn't inherit this rounding:

http://jsfiddle.net/BjeNx/20/

If I update the class ".ui-widget-head" like this:

.ui-widget-header {
    border-radius: 90px;
}

We get somewhere: http://jsfiddle.net/BjeNx/21/

But then, as the slider handle approaches the minimum value, the rounding gradually disappears!

This suggests it can be done!

Answer 1

滑块范围按应有的方式缩放。

问题是您的滑块范围超出了其父 div。要解决此问题，您可以向overflow:hidden其父级申请.ui-slider-horizontal.

摆弄溢出

不幸的是，这也防止了滑块手柄溢出。

实现您想要做的最简单的方法是min-width在滑块范围上设置一个，以阻止它以特定百分比缩放。这个百分比将是它开始溢出的点。

摆弄最小高度

这仅在您的滑块手柄隐藏其后面的实际范围时才有效。

CSS：

.ui-slider-range-min {
    min-width: 14%;
}