Question

我试图结合我见过的几种JQuery滑块技术，但我似乎无法让所有三种滑块同时工作。我想在页面上有多个滑块，每个滑块有两个手柄，标签随每个手柄移动。我觉得我在下面的小提琴中靠近，但是当您选择顶部或底部时，值会从手柄到手柄跳跃。有谁可以帮我这个例子？谢谢！

http://jsfiddle.net/9qwmX/729/

HTML：

<div class='slider' id='slider1'>
    <div class="slider-range"></div>
    <div class="min"></div>
    <div class="max"></div>
</div>
<div class='slider' id='slider2'>
    <div class="slider-range"></div>
    <div class="min"></div>
    <div class="max"></div>
</div>

的Javascript

$(document).ready(function () {
$(".slider").each(function () {
    $this = $(this);

    $(".slider-range", $this).slider({
        values: [1000, 9000],
        min: 1000,
        max: 9000,
        step: 1,
        slide: function (event, ui) {
            var delay = function () {
                var handleIndex = $(ui.handle).data('index.uiSliderHandle');
                var label = handleIndex == 0 ? '.min' : '.max';
                $(label).html('$' + ui.value).position({
                    my: 'center top',
                    at: 'center bottom',
                    of: ui.handle,
                    offset: "0, 0"
                });
            };

            // wait for the ui.handle to set its position
            setTimeout(delay, 5);

        }
    });

    $this.children('.min').html('$' + $this.slider('values', 0)).position({
        my: 'center top',
        at: 'center bottom',
        of: $($this.eq(0)),
        offset: "0, 10"
    });

    $this.children('.max').html('$' + $this.slider('values', 1)).position({
        my: 'center top',
        at: 'center bottom',
        of: $('.slider a:eq(1)'),
        offset: "0, 10"
    });
});
});

Answer 1

不是滑块专家，但请检查一下。 http://jsfiddle.net/9qwmX/730/

问题是，当你做

时

var label = handleIndex == 0 ? '.min' : '.max';

它不知道选择了哪个最小/最大值，而且它正在弄乱你。

var slider = $(ui.handle).closest('.slider');
var handleIndex = $(ui.handle).data('index.uiSliderHandle');
var label = handleIndex == 0 ? slider.find('.min') : slider.find('.max');

通过上面的操作，它将知道要抓取和更新的最小/最大值。

希望有所帮助

JQuery UI多个滑块，多个手柄，移动标签

1 个答案: