最小値が機能しない

Question

4つの値の最小値を設定しましたが、問題が発生しました。すべての4つのものは、最初のものの最小値を持っています。スライダーを動かすと、すべて正常に戻り、正常に動作します。問題はどこだ？

リンク：https://jsfiddle.net/57nv61a1/

$('#field2').rangeslider({ 
 
     polyfill:false, 
 
     onInit:function(){ 
 
     
 
      $('#input2').val($('input[type="range"]').val()); 
 
     }, 
 
     onSlide:function(position, value){ 
 
      $('.content #input2').val(value); 
 
     }, 
 
     onSlideEnd:function(position, value){ 
 
     } 
 
    }); 
 
    // Change the value of input field when slider changes 
 
    $('#field2').on('input', function() { 
 
     $('#input2').val(this.value); 
 
     console.log('$'+$('#input2').val()); 
 
    }); 
 
    // Change the value of slider field when input changes 
 
    $('#input2').on('input', function() { 
 
     if (this.value.length == 0) $('#field2').val(0).change(); 
 

 
     $('#field2').val(this.value).change(); 
 
    });

<label for="medical-expenses">Medical Expenses</label> 
 
<span class="label1">$ <input type="number" id="input1" min="1" max="10000"></input></span> 
 
<input id="field1" name="field1" type="range" min="1" max="10000" value="0" data-rangeslider> 
 

 
<label for="vehicle-damage">Vehicle Damage</label> 
 
<span class="label2">$ <input type="number" id="input2" min="2" max="10000"></input></span> 
 
<input id="field2" name="field2" type="range" min="2" max="10000" value="0" data-rangeslider>

Answer 1

この行：

$('#input4').val($('input[type="range"]').val()); 

すべてinput[type="range"]を選択し、第1の値をとり、$('#input4')に割り当て。あなたがコピーしているので

/同じコードを4回貼り付け、すべての入力は、あなたが最初に戻って、次にスライダーとの移動を開始した後、値は1

$('#input1').val($('input[type="range"]').val()); 
$('#input2').val($('input[type="range"]').val()); 
$('#input3').val($('input[type="range"]').val()); 
$('#input4').val($('input[type="range"]').val()); 

をある同じ値で初期化されます変更した後、それぞれの最小値（1,2,3,4）が適用されます。

ソリューション、まだ非常に洗練ものの、手動で正しい初期値に割り当てることであろう。

$('#input1').val(1); 
$('#input2').val(2); 
$('#input3').val(3); 
$('#input4').val(4);