Question

我在项目中实现了两个bootstrap滑块。我想基于动态滑动第一个滑块来更改第二个滑块的值。但它没有用。

我怎么能做到这一点？

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

}）;

根据动态更改第一个引导滑块的值，设置第二个Bootstrap滑块的值

1 个答案: