Javascript 如何动态更改 jquery ui 滑块的最小值、最大值？

How do I dynamically change min,max values for jquery ui slider?

提问by Evan

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

其中我的 min 和 max 包含在两个隐藏的 div 中，类start_price和end_price. 这当前不起作用，它不会更新最高价格，并且滑块的右手柄出现在左侧位置不正确的位置。关于如何进行这项工作的任何建议？我正在使用 php 作为后端。start_price 和 end_price 代码有效且正确。

采纳答案by ShankarSangoli

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

});

回答by Shailesh Kalamkar

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

首先销毁滑块，这将完全删除滑块功能。这将使元素返回到它的预初始化状态。

$("#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.

这有效。

回答by Chris

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，但是根据您所做的内部检查，您最终可能会多次重建您的滑块，这对您没有好处，因为在您从输入继续前进之前您不会使用它。