为 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 - 设置上手柄下边界，因此不可能将上手柄设置为低于此值

这是一个 工作此类范围滑块的示例。

这是 jQuery slider 之后必须运行的额外代码。它实际上重写了其内部函数之一来检查新设置。此代码只会在加载滑块脚本时更改滑块代码（因此第一个 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);