Как динамически изменять значения min, max для jquery ui slider?

Итак, у меня есть страница с ползунком jquery ui, который инициализируется следующим образом:

var min = $("#attrInformation").data("lowest_price"),
max = $("#attrInformation").data("highest_price");

    $( "#slider-range" ).slider({
        range: true,
        min: min,
        max: max,
        values: [ min, max ],
        slide: function( event, ui ) {
            var start = ui.values[0],
            end = ui.values[1];

            $("#startPrice").text(start);
            $("#endPrice").text(end);
        },
        stop: function(event,ui){
            var start = ui.values[0],
            end = ui.values[1];

            refineObject.price_min = start;
            refineObject.price_max = end;

            refineResults(refineObject);
        }
    });

и я хочу иметь возможность изменить min, max и AND, для которых две ручки включены, на основе результатов вызова ajax. поэтому я пробовал что-то вроде этого:

    $.get("ajax.php",options,function(data){
    $('.middle_container').html(data);          

    $('#slider-range').slider( "option", "min", $('.middle_container').find('.start_price').val() );
    $('#slider-range').slider( "option", "max", $('.middle_container').find('.end_price').val() );
    $('#slider-range').slider("value", $('#slider-range').slider("value"));

        });

где my min и max содержатся в двух скрытых div с классами start_price и end_price. это в настоящее время не работает, оно не обновляет максимальную цену, а правая ручка ползунка появляется слева от позиции. любые предложения о том, как сделать эту работу? Я использую php для бэкэнд. код start_price и end_price работает и исправляется.

Ответ 1

Убедитесь, что $('.middle_container').find('.start_price').val() и $('.middle_container').find('.end_price').val() возвращают правильные значения. Также, чтобы установить значение ползунка, вы должны использовать тот же синтаксис, который вы используете для установки значений min/max. Также

Попробуйте это

$.get("ajax.php",options,function(data){
    $('.middle_container').html(data);          

    $('#slider-range').slider( "option", "min", $('.middle_container').find('.start_price').val() );
    $('#slider-range').slider( "option", "max", $('.middle_container').find('.end_price').val() );
    $('#slider-range').slider( "option", "value", $('#slider-range').slider("value"));

});

Ответ 2

Сначала уничтожьте слайдер, полностью удалив функциональность ползунка. Это вернет элемент обратно в исходное состояние.

$("#selector").slider("destroy");

После этого вы можете добавить новые значения в ползунок как,

$("#selector").slider({
    range: "max",
    min: 0, // min value
    max: 200, // max value
    step: 0.1,
    value: 200, // default value of slider
    slide: function(event, ui) {
        $("#amount").val(ui.value);
    }
});

Это работает.

Ответ 3

Если вы хотите сделать это при изменении значения ввода, вы можете сделать что-то вроде этого.

$('#inputid').focusout(function() {

    // slider destroy and create as Shailesh showed
});

Я собирался использовать keyup вместо фокуса, но в зависимости от внутренних проверок, которые вы делаете, вы могли бы пересоздать свой слайдер много раз, что не принесло бы пользы, поскольку вы не будете использовать его, пока не перейдете от ввода.