jQuery 滑块 - 将最小值和最大值设置为与两个句柄的值相同

Question

也许我在这里没有得到简单的东西，但我无法将最小值和最大值设置为与我的 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 确保没有任何空格