CODEWITHSUNDEEP
javascriptjqueryjquery-uisliderjquery-ui-slider
Badri
Badri

Reputation: 2262

jQuery-ui slider - How to stop two sliders from controlling each other

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) );
    }
});

Upvotes: 3

Views: 3077

Answers (5)

beginner_
beginner_

Reputation: 7622

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

The solution of Badri works if you replace

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

with

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

Upvotes: 0

Badri
Badri

Reputation: 2262

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;
            }
        }
        });

});

Upvotes: 0

Svante
Svante

Reputation: 51501

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

Upvotes: 0

user37125
user37125

Reputation: 209

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.

Upvotes: 2

AndreasKnudsen
AndreasKnudsen

Reputation: 3481

You could store a var CurrentSlider = 'slider';

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

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

Upvotes: 1

Related Questions