Кастомный ползунок для выбора цены на jQuery UI
Опубликовано
30.04.2025$(function() {
// Инициализация слайдера
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [0, 500],
slide: function(event, ui) {
updatePriceInputs(ui.values[0], ui.values[1]);
},
change: function(event, ui) {
updatePriceInputs(ui.values[0], ui.values[1]);
}
});
// Функция для обновления полей ввода
function updatePriceInputs(minVal, maxVal) {
$(".input_price_min").val(minVal).trigger('change');
$(".input_price_max").val(maxVal).trigger('change');
}
// Обработчики для ручного ввода значений
$(".input_price_min").on('input', function() {
var currentValues = $("#slider-range").slider("values");
var newMin = Math.min($(this).val(), currentValues[1]);
$("#slider-range").slider("values", 0, newMin);
});
$(".input_price_max").on('input', function() {
var currentValues = $("#slider-range").slider("values");
var newMax = Math.max($(this).val(), currentValues[0]);
$("#slider-range").slider("values", 1, newMax);
});
// Инициализация начальных значений
updatePriceInputs(
$("#slider-range").slider("values", 0),
$("#slider-range").slider("values", 1)
);
});
Давайте создавать
вместе
Оставить заявку!