I am implementing the bootstrap slider, and involving TOP DOWN Approach to handle it i.e when the SUM slider is adjusted the value is propagated to both the sliders below it. And also the changes made to the bottom sliders will effect affects the SUM slider.
Everything is working fine, except when I am sliding the SUM slider, both the below sliders are starting from the same value, which I don't want to re-adjusted but to start from the same point of their current value.
Is there any way to fix that.
Here is the Working Fiddle.Try to slide the SUM slider, both the below slider will come to same point which I don't want. The SUM slider is to be distributed equally among two below but not from the same point i.e same value.
.html
<div class = "row">
<div class = "col-md-12">
<div class="wrapper4">
<p style = "text-align:center">
</div>
<div class = "col-md-12">
<div class = "col-md-4">
<div class="wrapper">
<hr />
<p>
SUM
</p>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="0.2" style="text-align: center"/>
<hr />
<input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="0.1" data-slider-orientation="vertical" />
<input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="0.1" data-slider-orientation="vertical" />
</div>
</div>
</div>
</div>
.js
$('#ex1').slider({
value : 17.5,
formatter: function(value) {
return 'AB: ' + value;
}
});
$('#ex2').slider({
value : 7.5,
tooltip_position:'bottom',
reversed : true,
formatter: function(value) {
return 'A: ' + value;
}
});
$('#ex3').slider({
value : 10,
reversed : true,
formatter: function(value) {
return 'B: ' + value;
}
})
// If you want to change slider main
$("#ex2,#ex3").on("slide", function() {
$('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue'));
});
// TOP DOWN APPROACH
$("#ex1").on("slide", function() {
$('#ex2,#ex3').slider('setValue', $('#ex1').slider('getValue')/2);
});