javascript - NoUiSlider - 入力値の複数のスライダーを更新する

Question

これまでの開発の大部分で jQuery を使用してきましたが、NoUiSlider を更新するためにバニラ Javascript を使用して障害にぶつかっています。

基本的に、次のコードで複数のスライダーを作成しています。

function createSlider ( slide ) {
    noUiSlider.create(sliders[slide], {
        start: 0,
        connect: "lower",
        orientation: "horizontal",
        step: 1,
        range: {
            'min': 0,
            'max': 240
        }
    });
}

var sliders = $('.slider');
for ( var i = 0; i < sliders.length; i++ ) {
    createSlider(i);
}

そして、これはすべて問題なくダンディであり、 を使用して変化するイベントを聞くことになっていることに気づきましたが、対応する値を設定するDRYupdateメソッドに非常に慣れていません...次があるとしましょうHTML:input

<div class="slider"></div>
<input type="text" value="0" />
<div class="slider"></div>
<input type="text" value="0" />
<div class="slider"></div>
<input type="text" value="0" />

変更されたスライダーの次のスライダーを更新するイベント リスナーを追加するにはどうすればよいinputですか?

私は次の行に沿って何かをすると思います：

(howToTargetEachInput).addEventListener('change', function(){
    (howToTargetEquivilantSlider).noUiSlider.set(this.value);
});

しかし、一連の ID などを使用せずに繰り返しリスナーを使用する方法がわかりません。どんな助けでも大歓迎です。

ここでプレイ: http://jsfiddle.net/z83oz9np/9/

---

更新/解決策

スライダーの作成中に呼び出されるバインド関数を次のように記述しました。

    function bindValues(slider, input){
        slider.noUiSlider.on('update', function( values, handle ) {
            input.value = values[handle];
        });
        input.addEventListener('change', function(){
            slider.noUiSlider.set(this.value);
        });
    }
    var sliders = $('.slider');
    var inputs = $('input');
    for ( var i = 0; i < sliders.length; i++ ) {
        noUiSlider.create(sliders[i], {
            start: 0,
            connect: "lower",
            orientation: "horizontal",
            step: 1,
            range: {
                'min': 0,
                'max': 240
            }
        });
        bindValues(sliders[i], inputs[i]);
    }