ionRangeSlider устанавливает значения в процентах
Я использую эту библиотеку: 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 процентов и наоборот. Значения на обоих ползунках разные, они будут динамически создаваться из серверной части.
Что не так в этом коде?
1 ответ
Посмотрите на эту демонстрацию:
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");