jquery ui滑块+更新最小值和最大值

Question

我正在制作这个演示：www.datesitesfree.com.au

滑块下方有 2 个数字 18 和 99...

我需要一个范围滑块（2 个可移动部分），最小值需要更新 18 值，最大值需要更新 99 值。例如：

关于如何获取 2 个移动部件以及如何让它们分别更新 2 个值的任何建议？

这是当前的 HTML：

    <h2 class="demoHeaders">Slider</h2>
    <div id="slider"></div>
    </br></br>
    <span id="minAge">18</span>
    </br></br>
    <span id="maxAge">99</span>

这是当前的 JQUERY：

            $('#slider').slider({
                min: 18,
                max: 99,
                change: function(event, ui) {
                    $('span#minAge').html(ui.value);
                }
            });

谢谢

Answer 1

为了有一个双滑块，你需要设置 range: true 和 values: [start, end]。

所以对于你的代码：

            $('#slider').slider({
                range: true,
                min: 18,
                max: 99,
                values: [18, 99],
                change: function(event, ui) {
                    $('span#minAge').html(ui.values[0]);
                    $('span#maxAge').html(ui.values[1]);
                }
            });