Jquery ui 在jQuery UI滑块中为每个范围句柄设置最小/最大值？

我使用jQuery滑块，用户可以在其中选择00:00到1d+12:00之间的时间范围。总共36个小时。 无论如何

我希望根据句柄的设置将最小值和最大值应用于句柄。以下是我的要求：

左把手在第二天不能超过午夜（最多24小时）

左手柄与右手柄的距离不能超过-24小时（最小值是右手柄值减去24小时）

右手柄与左手柄的距离不能超过+24小时（最大值为左手柄值加上24小时）

据我所知，最小值和最大值只能应用于单手柄滑块控制，而不能应用于范围滑块

是否可以分别为两个手柄设置最小值和最大值？

我尝试过以这种方式初始化它，但没有成功：

$(".timing-slider", timing).slider({
    range: true,
    min: [0, 0],
    max: [24, 36],
}

此jQuery UI滑块扩展满足所有的上层需求 我已成功更改了默认的jQuery UI滑块，以包含更多的配置属性：

• minRangeSize

  -设置最小范围大小，使范围不能小于此设置

• maxRangeSize

  -设置最大范围大小，使范围不能大于此设置

• autoShift

  -当设置为

  true

  时，当量程宽度达到最大值时，自动拖动另一个手柄；当设置为

  false

  时，手柄不能移动到最大范围宽度之外

• lowMax

  -设置下控制柄上边界，因此无法将下控制柄设置为超出此值

• topMin

  -设置上控制柄下边界，因此无法将上控制柄设置为低于此值

这是一个这样的范围滑块

这是在jQuery滑块之后必须运行的额外代码。它实际上重写了一个内部函数来检查新设置。此代码仅在加载滑块脚本时更改滑块代码（因此第一个if语句检查滑块小部件是否已加载）：

（函数（$）{
如果（$.ui.slider）
{
//添加最小范围长度选项
$.extend（$.ui.slider.prototype.options{
minRangeSize:0，
最大范围大小：100，
自动换档：错误，
lowMax:100，
topMin:0
});
$.extend（$.ui.slider.prototype{
_幻灯片：函数（事件、索引、newVal）{
var otherVal，
新价值观，
允许，
因素
if（this.options.values&&this.options.values.length）
{
otherVal=该值（指数？0:1）；
系数=指数===0？1:-1；
if（this.options.values.length==2&&this.options.range==true）
{
//下限最大值
if（index==0&&newVal>this.options.lowMax）
{
newVal=this.options.lowMax；
}
//最小上限
if（index==1&&newValthis.options.maxRangeSize）
{
if（this.options.autoShift==true）
{
otherVal=newVal+this.options.maxRangeSize*因子；
}
其他的
{
newVal=otherVal-this.options.maxRangeSize*因子；
}
}
}
if（newVal！==this.values（index））
{
newValues=this.values（）；
newValues[index]=newVal；
newValues[index？0:1]=otherVal；
//通过从幻灯片回调返回false，可以取消幻灯片
允许=此。\触发（“滑动”，事件{
句柄：this.handles[index]，
值：newVal，
价值观：新价值观
});
如果（允许！==false）
{
此参数值（索引、newVal、true）；
这个值（（索引+1）%2，其他值，true）；
}
}
}否则
{
if（newVal！==this.value（））
{
//通过从幻灯片回调返回false，可以取消幻灯片
允许=此。\触发（“滑动”，事件{
句柄：this.handles[index]，
值：newVal
});
如果（允许！==false）
{
该值（newVal）；
}
}
}
}
});
}
})（jQuery）；

这太简单了，太棒了！你在GitHub上有这个吗？@PedroPeixoto:还没有，但它已经在计划中很久了。到目前为止，我所做的只是使用所有必要的代码。请随意查看。@RobertKoritnik。这是很棒的东西！非常感谢！

(function ($) {
    if ($.ui.slider)
    {
        // add minimum range length option
        $.extend($.ui.slider.prototype.options, {
            minRangeSize: 0,
            maxRangeSize: 100,
            autoShift: false,
            lowMax: 100,
            topMin: 0
        });

        $.extend($.ui.slider.prototype, {
            _slide: function (event, index, newVal) {
                var otherVal,
                newValues,
                allowed,
                factor;

                if (this.options.values && this.options.values.length)
                {
                    otherVal = this.values(index ? 0 : 1);
                    factor = index === 0 ? 1 : -1;

                    if (this.options.values.length === 2 && this.options.range === true)
                    {
                        // lower bound max
                        if (index === 0 && newVal > this.options.lowMax)
                        {
                            newVal = this.options.lowMax;
                        }
                        // upper bound min
                        if (index === 1 && newVal < this.options.topMin)
                        {
                            newVal = this.options.topMin;
                        }
                        // minimum range requirements
                        if ((otherVal - newVal) * factor < this.options.minRangeSize)
                        {
                            newVal = otherVal - this.options.minRangeSize * factor;
                        }
                        // maximum range requirements
                        if ((otherVal - newVal) * factor > this.options.maxRangeSize)
                        {
                            if (this.options.autoShift === true)
                            {
                                otherVal = newVal + this.options.maxRangeSize * factor;
                            }
                            else
                            {
                                newVal = otherVal - this.options.maxRangeSize * factor;
                            }
                        }
                    }

                    if (newVal !== this.values(index))
                    {
                        newValues = this.values();
                        newValues[index] = newVal;
                        newValues[index ? 0 : 1] = otherVal;
                        // A slide can be canceled by returning false from the slide callback
                        allowed = this._trigger("slide", event, {
                            handle: this.handles[index],
                            value: newVal,
                            values: newValues
                        });
                        if (allowed !== false)
                        {
                            this.values(index, newVal, true);
                            this.values((index + 1) % 2, otherVal, true);
                        }
                    }
                } else
                {
                    if (newVal !== this.value())
                    {
                        // A slide can be canceled by returning false from the slide callback
                        allowed = this._trigger("slide", event, {
                            handle: this.handles[index],
                            value: newVal
                        });
                        if (allowed !== false)
                        {
                            this.value(newVal);
                        }
                    }
                }
            }
        });
    }
})(jQuery);