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

Question

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

我想根据它们的设置将最小值和最大值应用于我的句柄。这些是我的要求：

1. 左手柄永远不能超过第二天的午夜（最长为 24 小时）
2. 左手柄从右手柄向左移动的时间不能超过 -24 小时（最小值是右手柄值减去 24 小时）
3. 右手柄距离左手柄不能超过 +24 小时（最大值是左手柄值加上 24 小时）

据我了解，最小值和最大值只能应用于单手柄滑块控件，而不能应用于范围滑块？

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

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

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

Answer 1

这个 jQuery UI 滑块 扩展 满足所有上层要求

我已设法更改默认的 jQuery UI 滑块以包含更多配置属性：

• minRangeSize - 设置最小范围大小，因此范围不能小于此设置
• maxRangeSize - 设置最大范围大小，因此范围不能超过此设置
• autoShift - 当设置为true 时，它会在范围宽度达到最大时自动拖动另一个手柄；当设置为false 时，句柄不能移动超出最大范围宽度
• lowMax - 设置下句柄上限，因此无法设置超出此值的下句柄
• topMin - 设置上句柄下边界，因此不可能将上句柄设置为低于此值

这是此类范围滑块的working example。

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

(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);