如何动态更改jquery ui滑动条的最小值和最大值?

So I have a page with a jquery ui slider on it initialized with the following:

我有一个带有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);
        }
    });

and i want to be able to change the min, max, AND the value for which the two handles are on based on the results of an ajax call. so i've tried something like this:

我希望能够根据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"));

        });

where my min and max are contained in two hidden divs with the class start_price and end_price. this currently does not work, it doesn't update the max price and the slider's right handle appears over on the left out of position. any suggestions on how to make this work? i'm using php for the backend. the start_price and end_price code is working and correct.

其中，我的最小值和最大值包含在两个隐藏的div中，其中包含类start_price和end_price。这目前不工作，它不更新最大价格和滑块的右手柄出现在左边的位置。有什么建议吗?我在后台使用php。start_price和end_price代码正在正常工作和正确工作。

3 个解决方案

#1

Make sure $('.middle_container').find('.start_price').val() and $('.middle_container').find('.end_price').val() are returning proper values. Also to set the value of the slider you have to use the same syntax which you are using for setting min/max values. Also

确保$('.middle_container').find('.start_price').val()和$('.middle_container').find('.end_price').val()返回正确的值。另外，要设置滑块的值，您必须使用与设置最小/最大值相同的语法。也

Try this

试试这个

$.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

Destroy the slider first, which removes the slider functionality completely. This will return the element back to its pre-init state.

首先破坏滑块，它完全移除滑块的功能。这将把元素返回到它的pre-init状态。

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

After that you can add new values to the slider as,

之后可以向滑动条添加新值，

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

This works.

这个作品。

#3

If you want to do this on an input value changing you can do something like this.

如果你想在输入值改变时这样做，你可以这样做。

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

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

I was going to use keyup instead of focus, but depending on the internal checks you make, you could end up rebuilding your slider many times which would not be a benefit as you wont use it until you moving on from the input.

我将使用keyup而不是focus，但是根据您所做的内部检查，您最终可能会重新构建您的滑块很多次，这不是一个好处，因为您不会使用它，直到您继续从输入。

#1