Question

也许我只是在这里没有简单的东西，但是我无法将min和max值设置为与jQuery滑块中的句柄值相同。最小值和最大值是通过php变量动态定义的，当滑块首次出现时，我希望它的范围与最小值和最大值之间的范围相同，即整个滑块。如果用户想要进行更改，他们可以这样做 - 它是用于ajax搜索过滤器。

当我尝试以下代码时，范围滑块会一直卡在左侧，无法移动。

这是我的js：

var pay_max = $('#pay_max').html();
var pay_min = $('#pay_min').html();

$(function() {
$( "#pay_range" ).slider({
    range: true,
    min: pay_min,
    max: pay_max,
    values: [ pay_min, pay_max ],
    slide: function( event, ui ) {
        $( "#filter_by_pay" ).html( "Pay Range: ¥" + ui.values[ 0 ] + " - ¥" + ui.values[ 1 ] ).css("color", "black");
    }
});

我的HTML：

 <div class = "hidden" id="pay_max"><?=max($all_teachers['pay']);?></div>
 <div class = "hidden" id="pay_min"><?=min($all_teachers['pay']);?></div>

        <div class = "filter_options" id="pay_filter">
            <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
            <div id ="pay_range"></div>
        </div>

例如，如果我将min更改为0，则可以正常工作，但这不是目标。我只希望范围滑块在初始值的范围内，这也恰好是最小值和最大值。

Answer 1

您正尝试在需要数字的地方使用字符串值：

尝试：

var pay_max = 1*$.trim($('#pay_max').html());
var pay_min = 1*$.trim($('#pay_min').html());

使用$.trim确保没有任何空格

jQuery滑块 - 将min和max设置为与两个句柄的值相同

1 个答案: