Question

我正在使用jQuery滑块，用户可以在00:00和1d + 12:00之间选择时间范围。一共36个小时。反正。

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

左手柄在第二天不能超过午夜（最多24小时）
左手柄永远不会比右手柄处理的时间长-24小时（最小值是右手柄值减去24小时）
右手柄永远不会超过左手柄+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);

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

1 个答案:

此jQuery UI滑块扩展名满足所有上限要求