12

2 つのスライダーがあり、一方のスライダーの動きに基づいてもう一方のスライダーの範囲を更新したいと考えています。

例えば; Slider_1 と Slider_2 の範囲はどちらも 1 ～ 10 です。Slider_1 を位置 1 から 2 に移動すると、slider_2 の範囲が 1-10 から 1-20 に変更されます。スライダー 1 を位置 2 から 3 に移動すると、スライダー 3 の範囲は 1 から 30 になり、以降も同様です。

次のようにスライダーを初期化します。

  function slider() {
        $(".slider").noUiSlider({
            orientation: "horizontal",
            start: [0],
            range: {
                min: 0,
                max: 10,
            },
            connect: 'lower',
            direction: "ltr",
            step: 1,
        });
    };

これまでのところ、これを実装するための最良の方法は、スライダー全体を分解し、毎回新しい範囲で再初期化することです。ただし、スライダーを適切に分解する方法がわかりません。

これをどのように行うべきかについてのアイデアはありますか？

4

3 に答える 3

31

noUiSlider は、updateOptionsすべての設定を保持し、渡した新しい設定を保存するメソッドを提供します。更新に関するドキュメントはこちらです。

noUiSlider 8 以降では、次のことができます。

slider.noUiSlider.updateOptions({
    range: {
        'min': 20,
        'max': 30
    }
});

開示：私はプラグインの作者です。

于 2014-09-10T19:32:06.670 に答える
2

オブジェクトを引数として渡すことでupdateOptions関数を使用できます。Yoは、次のようにプログラムで独自の「構成オブジェクト」を構築できます。

config = {
        orientation: "horizontal",
        start: [100,200],
        range: {
            min: 0,
            max: 200,
        },
        connect: 'lower',
        direction: "ltr",
        step: 10,
    };

次に、Javascript の任意の場所でスライダーを更新します。

 $(".slider").updateOptions(config);
于 2015-11-26T15:29:12.110 に答える