根據更改第一個引導滑塊的值動態設置第二個引導滑塊的值

Question

我在我的項目中實現了兩個引導滑塊。並且我想要根據第一個滑塊動態滑動來更改第二個滑塊的值。但它不起作用。

我該如何做到這一點？

我的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); 

}）;