jQuery-ui slider - 如何阻止两个滑块相互控制

This is in reference to the question previously asked

这是参考先前提出的问题

The problem here is, each slider controls the other. It results in feedback.

这里的问题是,每个滑块控制另一个。它会产生反馈。

How do I possibly stop it?

我怎么可能阻止它?

$(function() {
    $("#slider").slider({ slide: moveSlider2 });
    $("#slider1").slider({ slide: moveSlider1 });
    function moveSlider2( e, ui ) 
    {
        $('#slider1').slider( 'moveTo', Math.round(ui.value) );
    }

    function moveSlider1( e, ui ) 
    {
        $('#slider').slider( 'moveTo', Math.round(ui.value) );
    }
});

5 个解决方案

#1

This is sort of a hack, but works:

这有点像黑客,但有效:

$(function () {
    var slider = $("#slider");
    var slider1 = $("#slider1");
    var sliderHandle = $("#slider").find('.ui-slider-handle');
    var slider1Handle = $("#slider1").find('.ui-slider-handle');

    slider.slider({ slide: moveSlider1 });
    slider1.slider({ slide: moveSlider });

    function moveSlider( e, ui ) {
        sliderHandle.css('left', slider1Handle.css('left'));
    }

    function moveSlider1( e, ui ) {
        slider1Handle.css('left', sliderHandle.css('left'));
    }
});

Basically, you avoid the feedback by manipulating the css directly, not firing the slide event.

基本上,您可以通过直接操作css来避免反馈,而不是触发幻灯片事件。

#2

You could store a var CurrentSlider = 'slider';

你可以存储一个var CurrentSlider ='slider';

on mousedown on either of the sliders, you set the CurrentSlider value to that slider,

在任一滑块上的mousedown上,将CurrentSlider值设置为该滑块,

and in your moveSlider(...) method you check whether this is the CurrentSlider, if not, you don't propagate the sliding (avoiding the feedback)

并在你的moveSlider(...)方法中检查这是否是CurrentSlider,如果没有,则不传播滑动(避免反馈)

#3

You could just give an optional parameter to your moveSlider1 and moveSlider2 functions that, when set to a true value, suppresses the recursion.

您可以为moveSlider1和moveSlider2函数提供一个可选参数,当设置为true值时,它会抑制递归。

#4

A simpler approach which is kind of a hybrid of the above answers:

一种更简单的方法,它是上述答案的混合体:

    var s1 = true;
    var s2 = true;
    $('#slider').slider({
        handle: '.slider_handle',
        min: -100,
        max: 100,
        start: function(e, ui) {
        },
        stop: function(e, ui) { 
        },
        slide: function(e, ui) {
            if(s1)
            {
                s2 = false;
                $('#slider1').slider("moveTo", ui.value);
                s2 = true;
            }
        }
    });


    $("#slider1").slider({ 
        min: -100, 
        max: 100,
        start: function(e, ui) {
        },
        stop: function(e, ui) { 
        },
        slide: function(e, ui) {
            if(s2)
            {
                s1 = false;
                $('#slider').slider("moveTo", ui.value);
                s1 = true;
            }
        }
        });

});

#5

Tried this now and all answers do not work possibly due to changes to jquery ui.

现在尝试了这个,并且所有答案都可能由于jquery ui的更改而无效。

The solution of Badri works if you replace

如果你更换Badri的解决方案

$('#slider').slider("moveTo", ui.value);

with

$('#slider').slider("option", "value", ui.value);

#1