我正在实现 Bootstrap slider ,并涉及 TOP DOWN 方法来处理它,即当调整 SUM slider 时,该值将传播到它下面的两个 slider 。并且对底部 slider 所做的更改也会影响 SUM slider 。
一切正常,除了当我滑动 SUM slider 时,下面的两个 slider 都从相同的值开始,我不想重新调整,而是从它们当前值的相同点开始。
有什么办法可以解决这个问题。
这是 Working Fiddle .尝试滑动 SUM slider ,下面的两个 slider 都会到达我不想要的同一点。 SUM slider 将在下面的两个 slider 之间平均分配,但不是从同一点开始,即相同的值。
.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);
});
最佳答案
您可以在 $ex1
上的 slide
事件的回调函数中反转添加,并跟踪 $ex2
和$ex3
。我已将 setValue
的第二个参数设置为 false。根据文档,这应该确保不会触发这些 slider 上的 slide
事件。这就是我在 $ex1
的 slideStop
事件上更新 ex2Val
和 ex3Val
的原因。
希望这是有道理的。只需看一下代码片段,您就会明白这一点。
;)
var $ex1 = $('#ex1');
var $ex2 = $('#ex2');
var $ex3 = $('#ex3');
var ex2Val = 7.5;
var ex3Val = 10.5;
$ex1.slider({
value : ex2Val + ex3Val,
formatter: function(value) {
return 'AB: ' + value;
}
});
$ex2.slider({
value : ex2Val,
tooltip_position:'bottom',
reversed : true,
formatter: function(value) {
return 'A: ' + value;
}
});
$ex3.slider({
value : ex3Val,
reversed : true,
formatter: function(value) {
return 'B: ' + value;
}
})
// If you want to change slider main
$ex2.on("slide", function(evt) {
ex2Val = evt.value;
$ex1.slider('setValue', (ex2Val + ex3Val));
});
$ex3.on("slide", function(evt) {
ex3Val = evt.value;
$ex1.slider('setValue', (ex2Val + ex3Val));
});
// TOP DOWN APPROACH
$ex1.on("slide", function(evt) {
$ex2.slider('setValue', evt.value - ex3Val, false);
$ex3.slider('setValue', evt.value - ex2Val, false);
});
$ex1.on("slideStop", function(evt) {
ex2Val = $ex2.slider('getValue');
ex3Val = $ex3.slider('getValue');
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css');
.wrapper {
padding : 0px;
margin-top: 0px;
}
.wrapper4 {
padding : 0px 30px 0px 30px;
margin-top: 10px;
}
#ex2Slider, #ex3Slider, #ex4Slider, #ex5Slider, #ex17Slider{
margin-right :20px;
}
#ex1Slider .slider-selection {
background: #ff6666;
}
#ex1Slider .slider-handle, #ex2Slider .slider-handle, #ex3Slider .slider-handle {
background: #ff6666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<div class = "row">
<div class = "col-md-12">
<div class = "col-md-4">
<div class="wrapper">
<hr />
<p>SUM</p>
<input id="ex1" type="text" style="text-align: center"
data-slider-id='ex1Slider'
data-slider-min="0" data-slider-max="80"
data-slider-step="0.2"/>
<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>
关于javascript - Bootstrap Slider 从同一点开始,同时更改主,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39064744/