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

Posted 2023-02-18

【中文标题】如何动态更改 jquery ui 滑块的最小值、最大值？

【英文标题】：How do I dynamically change min,max values for jquery ui slider?

【发布时间】：2012-02-06 09:38:26

【问题描述】：

所以我有一个带有 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 调用的结果更改两个句柄的最小值、最大值和值。所以我尝试过这样的事情：

    $.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 代码有效且正确。

【问题讨论】：

您也可以发布您的 HTML 吗？

【参考方案1】：

如果您想在输入值更改时执行此操作，您可以执行以下操作。

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

    // slider destroy and create as Shailesh showed
);

我打算使用 keyup 而不是 focus，但是根据您所做的内部检查，您最终可能会多次重建滑块，这不会有什么好处，因为在您从输入继续之前不会使用它。

【参考方案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);
    
);​

这行得通。

【讨论】：

Uncaught Error: cannot call methods on slider prior to initialization; attempted to call method 'destroy' 我尝试了许多不同的解决方案。这个对我也不起作用。

【参考方案3】：

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

);

【讨论】：

如何分别访问每个值？因为这是一个范围所以有两个句柄