Question

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

我希望能够根据ajax调用的结果更改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("value", $('#slider-range').slider("value"));

        });

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

Answer 1

确保$('.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"));

});

Answer 2

首先销毁滑块，完全删除滑块功能。这将使元素返回到pre-init状态。

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

这很有效。

Answer 3

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

    Error Code: 10944642 Error Message: Error: Inbound SOAP Message - Session Token is missing

我打算使用keyup而不是焦点，但是根据你进行的内部检查，你可能会多次重建你的滑块，这不会有什么好处，因为你不会使用它直到你从输入继续。

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

3 个答案: