4

ユーザーが 00:00 から 1d+12:00 までの時間範囲を選択できる jQuery スライダーを使用しています。合わせて36時間。ともかく。

ハンドルの設定に基づいて、最小値と最大値をハンドルに適用したいと思います。これらは私の要件です：

  1. 左ハンドルは次の日の午前 0 時を超えることはありません (最大は 24 時間)
  2. 左ハンドルは、右ハンドルから -24 時間よりも左に移動することはできません (最小値は、右ハンドルの値から 24 時間を引いた値です)
  3. 右ハンドルは左ハンドルから +24 時間を超えることはありません (最大は左ハンドルの値に 24 時間を加えた値です)

私が理解しているように、最小値と最大値は単一のハンドル スライダー コントロールにのみ適用でき、範囲スライダーには適用できませんか?

最小値と最大値を両方のハンドルに個別に設定することはできますか?

この方法で初期化しようとしましたが、うまくいきません:

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

1 に答える 1

10

この jQuery UI スライダー拡張機能は、上位の要件をすべて満たしています。

デフォルトの jQuery UI スライダーを変更して、さらにいくつかの構成プロパティを含めることができました。

  • minRangeSize- 最小範囲サイズを設定して、範囲がこの設定より狭くならないようにします
  • maxRangeSize- 最大範囲サイズを設定して、範囲がこの設定より広くならないようにします
  • autoShift- 設定するtrueと、範囲幅が最大に達したときに、他のハンドルが自動的にドラッグされます。falseハンドルに設定されている場合、最大範囲幅を超えて移動することはできません
  • lowMax- 下ハンドルの上限を設定するため、この値を超えて下ハンドルを設定することはできません
  • topMin- 上限ハンドルの下限を設定するため、上限ハンドルをこの値より下に設定することはできません

これは、そのようなレンジ スライダーの実例です。

これは、jQuery スライダーの後に実行する必要がある追加のコードです。内部関数の 1 つを実際に書き換えて、新しい設定もチェックします。このコードは、スライダー スクリプトが読み込まれたときにのみスライダー コードを変更します (したがって、スライダー ウィジェットが読み込まれたかどうかを確認する最初の 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);
于 2011-08-12T15:43:43.313 に答える