jquery UI slider to move multiple divs

Question

Hey i want to use jquery UI to have a slider on my page that moves multiple divs different distances.

So basically you pull the slider and div1 moves 10px left and div2 moves 20px left.

I have taken a look at the jquery UI slider here http://jqueryui.com/demos/slider/#side-scroll but i cant figure out how to get that slider to move multiple divs.

Help would be greatly appreciates. I am pretty new to jquery but i am enjoying the learning experience =]

Answer 1

You can use the .slide() event, no? http://jqueryui.com/demos/slider/#event-slide

That way you can adjust the divs like you want. I'll write a little example

Made a small example: http://labs.joggink.be/slider-multiple-divs/

The slider resizes 3 divs like this (it's very basic and ugly written):

        $("#slider").slider(
            {
                        value:100,
                        min: 10,
                        max: 250,
                        step: 10,
                        slide: function(event, ui) {
                            $('#div-1').css({
                                width : ui.value + 'px',
                                height: ui.value + 'px'
                            });
                            $('#div-2').css({
                                width : ui.value + 10 + 'px',
                                height: ui.value + 10 + 'px'
                            });
                            $('#div-3').css({
                                width : ui.value + 20 + 'px',
                                height: ui.value + 20 + 'px'
                            });
                        }
            });
    });