我正在使用 jQuery 滑块，用户可以在其中选择 00:00 到 1d+12:00 之间的时间范围。一共36小时。反正。
我想根据它们的设置将最小值和最大值应用于我的句柄。这些是我的要求：
据我了解，最小值和最大值只能应用于单手柄滑块控件而不是范围滑块？
是否可以分别为两个手柄设置最小值和最大值？
我试过用这种方式初始化它，但没有运气：
$(".timing-slider", timing).slider({
range: true,
min: [0, 0],
max: [24, 36],
}
我设法更改了默认的 jQuery UI 滑块以包含更多配置属性：
minRangeSize- 设置最小范围大小，因此范围不能小于此设置maxRangeSize- 设置最大范围大小，因此范围不能大于此设置autoShift- 当设置为true它时，当范围宽度达到最大时，它会自动拖动另一个手柄；当设置为false处理时，不能移动超出最大范围宽度lowMax- 设置下手柄上边界，因此不可能将下手柄设置超过此值topMin- 设置上句柄下边界，因此不可能将上句柄设置为低于此值这是这种范围滑块的一个工作示例。
这是必须在 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);