jqueryui滑块与禁用区域？

Question

我可以在jqueryui滑块中拥有活动区域和非活动区域吗？像这样：

此处，两个手柄不应在白色区域中滑动。

我试图找到解决方案，但无法想出任何解决方案。

修改

我需要这样的设计来选择给定间隔之间的时间，其中一部分间隔不能被选择。

例如：我需要选择中午12:00到下午6:00之间的时间，但不允许在下午1:00到下午2:00之间进行选择。

Answer 1

我使用简单的CSS hack找到了一个解决方案，尽管它使用了多个滑块。

这是我的代码：

<强> HTML：

<div id="slider1" class="slider"></div>
<div id="slider2" class="slider"></div>
<div id="slider3" class="slider"></div>

<强> CSS：

.slider {
    display:inline-block;
    float:left;
    border-radius:0;
}
#slider1{
    width:50px;
}
#slider2{
    width:100px;
    background:#ddd;
    border-left:none;
    border-right:none;
}
#slider2 a{
    display:none;
}
#slider3{
    width:75px;
}

<强> jQuery的：

$('.slider').slider();

这是 working demo 。

Answer 2

为什么需要这样做？

拥有两个单独的滑块是不是更好的解决方案？

您需要向我们提供更多信息，例如应用此信息，因为据我所知，您不能使用滑块的属性执行此操作，但是您可以使用一些hackish JS来执行此操作。