Кастомный ползунок для выбора цены на jQuery UI

$(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)
    );
});

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *