Установить мин / макс для каждого маркера диапазона в слайдере пользовательского интерфейса jQuery?

Question

Я использую ползунок jQuery, где пользователи могут выбирать диапазон времени от 00:00 до 1d + 12: 00.36 часов все вместе.В любом случае.

Я бы хотел применить минимальные и максимальные значения к моим маркерам в зависимости от того, на что они установлены.Вот мои требования:

1. левая ручка никогда не может выходить за полночь следующего дня (максимум 24 часа)
2. левая ручка никогда не может идти больше левой, чем -24 часа справадескриптор (min - значение правой ручки минус 24 часа)
3. правая ручка не может превышать +24 часа от левой ручки (max - значение левой ручки плюс 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.Он фактически переписывает одну из своих внутренних функций, чтобы также проверить новые настройки.Этот код будет изменять код слайдера только после загрузки скрипта слайдера (отсюда первый оператор 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);