var $range = $("#prc"),
$range2 = $("#yer"),
$from = $("#prc-from"),
$to = $("#prc-to"),
$from2 = $("#year-from"),
$to2 = $("#year-to"),
range,
range2,
min = 100,
max = 1000000,
min2=1800,
max2=2021,
from,
to,
from2,
to2;
var updateValues = function () {
$from.prop("value", from);
$to.prop("value", to);
$from2.prop("value", from2);
$to2.prop("value", to2);
};
$range.ionRangeSlider({
type: "double",
min: min,
max: max,
step: 100,
prettify_enabled: false,
grid: false,
hide_from_to: true,
onChange: function (data) {
from = data.from;
to = data.to;
updateValues();
},
onFinish: function (data) {
from = data.from;
to = data.to;
updateValues();
}
});
$range2.ionRangeSlider({
type: "double",
min: min2,
max: max2,
step: 1,
prettify_enabled: false,
grid: false,
hide_from_to: true,
onChange: function (data) {
from2 = data.from;
to2 = data.to;
updateValues();
},
onFinish: function (data) {
from2 = data.from;
to2 = data.to;
updateValues();
}
});
range = $range.data("ionRangeSlider");
range2 = $range2.data("ionRangeSlider");
var updateRange = function () {
range.update({
from: from,
to: to
});
range2.update({
from: from2,
to: to2
});
};
[$from,$from2].on("change", function () {
from = +$(this).prop("value");
from2 = +$(this).prop("value");
if (from < min) {
from = min;
}
if (from > to) {
from = to;
}
if (from2 < min2) {
from2 = min2;
}
if (from2 > to2) {
from2 = to2;
}
updateValues();
updateRange();
});
[$to,$to2].on("change", function () {
to = +$(this).prop("value");
to2 = +$(this).prop("value");
if (to > max) {
to = max;
}
if (to < from) {
to = from;
}
if (to2 > max2) {
to2 = max2;
}
if (to2 < from2) {
to2 = from2;
}
updateValues();
updateRange();
});
Попытка продублировать range слайдер. Но во втором слайдере не работает изменение ползунка через input.
Как правильно продублировать слайдер?