Как динамически изменить минимальное, максимальное значения для jquery ui? - PullRequest
Новая
       36

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

12 голосов
/ 10 января 2012

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

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

, и я хочу иметь возможность изменить минимальное, максимальное и значение, для которого обрабатываются эти две ручкиоснованы на результатах 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"));

        });

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

Ответы [ 3 ]

12 голосов
/ 10 января 2012

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

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

$.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 голосов
/ 09 августа 2013

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

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

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

0 голосов
/ 11 июня 2016

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

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

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

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

...