最初のブートストラップスライダの値を動的に変更することに基づいて、2番目のブートストラップスライダの値を設定します。

Question

私は2つのブートストラップスライダをプロジェクトに実装しました。最初のスライダーを動的にスライドさせることに基づいて、2番目のスライダーの値を変更したいと考えています。それは動作していません。

これをどのように達成できますか？

私のHTMLコード： -

<td><input id="ex1" type="text" value="" class="slider form-control" data-slider-min="0" data-slider-max="1500" data-slider-step="5" data-slider-value="1000" data-slider-orientation="vertical" data-slider-selection="after" data-slider-tooltip="show" data-slider-id="red"></td> 

<td><input id="ex2" type="text" value="" class="slider form-control" data-slider-min="0" data-slider-max="2000" data-slider-step="5" data-slider-value="1200" data-slider-orientation="vertical" data-slider-selection="after" data-slider-tooltip="show" data-slider-id="blue"></td> 

私のjQueryのコード次のように：しかし、次の方法のいずれもが今、私はこのような私の問題修正した

$("#ex1").on("slide", function() { 
    $("#ex2").attr('data-slider-value', '200'); 
}); 


$("#ex1").on("slide", function() { 
    $("#ex2").val('200'); 
}); 


$("#ex1").on("slide", function() { 
    $("#ex2").attr('value', '200'); 
}); 

Answer 1

を作業していない：

$("#ex1").on("slide", function() { 
var minSliderValue = $("#ex2").data("slider-min"); 
var maxSliderValue = $("#ex2").data("slider-max"); 

$('#ex2').slider({ 
value : 0, 
reversed:true, 
formatter: function(value) { 
return 'Current value: ' + value; 
} 
}); 

$("#aqua").hide();//hide duplicate slider based on id 

var val = Math.abs(parseFloat(ownesAmt, 10) || minSliderValue); 
this.value = val > maxSliderValue ? maxSliderValue : val; 
$('#ex2').slider('setValue', val); 

を

}）;