我正在使用此库:ionRangeSlider
我试图根据当前百分比绑定2个滑块,这是我的代码:
$(function(){
$("#foo").ionRangeSlider({
type: "single",
grid: true,
min: 1,
max: 200,
from: 50,
keyboard: true,
onFinish: function(data) {
var percent = 100 - Math.floor(data.from_percent);
if( data.input[0].id === 'foo' ){
priceSlider.update({
from: percent
});
}
else{
timeSlider.update({
from: percent
});
}
},
});
$("#bar").ionRangeSlider({
type: "single",
grid: true,
min: 500,
max: 1000,
from: 50,
keyboard: true,
onFinish: function(data) {
var percent = 100 - Math.floor(data.from_percent);
if( data.input[0].id === 'foo' ){
priceSlider.update({
from: percent
});
}
else{
timeSlider.update({
from: percent
});
}
},
});
var priceSlider = $('#bar').data("ionRangeSlider"),
timeSlider = $('#foo').data("ionRangeSlider");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.min.css">
<label>Price</label>
<input type="text" class="slider" id="bar">
<label>Time</label>
<input type="text" class="slider" id="foo">
例如,如果FOO移动到25%,则BAR必须移动到75%,反之亦然。两个滑块上的值都不同,它们将从后端动态构建。
此代码有什么问题?
答案 0 :(得分:0)
看看这个演示:
var $range1 = $(".js-range-slider-1");
var $range2 = $(".js-range-slider-2");
var range_instance_1;
var range_instance_2;
var min = 100;
var max = 1000;
$range1.ionRangeSlider({
type: "single",
min: min,
max: max,
from: 500,
onChange: function (data) {
range_instance_2.update({
from: max - (data.from - min)
});
}
});
range_instance_1 = $range1.data("ionRangeSlider");
$range2.ionRangeSlider({
type: "single",
min: min,
max: max,
from: 600,
onChange: function (data) {
range_instance_1.update({
from: max - (data.from - min)
});
}
});
range_instance_2 = $range2.data("ionRangeSlider");