CODEWITHSUNDEEP
jqueryjquery-uiuislider
Glenn
Glenn

Reputation: 549

Moving a jquery slider slowly

I have a slider which I want to move when I arrive at a certain div. When it does, I want to have the slider move down while performing the interaction it is meant to.

http://jsfiddle.net/7gk2C/

This is the example, the problem being that the call $("#secrets-slider").slider("value", $("#secrets-slider").slider("option", "min") ); does indeed move the slider, but it does it instantly, and it doesn't do what the slider should do(move the div).

Would I need to call $( "#magic" ).css('top', ui.value + 'px'); after it, or is there another way? And is there an easy way to do this slowly with a variable speed?

For the benefit of all. The solution I found to work seems to be...

http://jsfiddle.net/7gk2C/3/

Upvotes: 1

Views: 2017

Answers (3)

Oerd
Oerd

Reputation: 2303

You are re-initializing the slider with the .slider() call, that's why the events are not triggered (technically it's not being moved).

Update:

Here is the answer from a similar question here on SO (jQuery-ui slider animation when setting value programmatically), there's also a fiddle but this is the relevant code:

$("#slider").slider({
        value:100,
        min: 0,
        max: 500,
        step: 1,
        animate: "slow",
        slide: function( event, ui ) {
            $( "#slider-value" ).html( ui.value );
        }
});

$( "#slider-value" ).html(  $('#slider').slider('value') );

$("button").click( function(){
    $("#slider").slider('value', 150);
});

Upvotes: 1

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

You can set the animate option 

$( "#secrets-slider" ).slider({
    orientation: "vertical",
    min: 0,
    max: 200,
    value: 10,
    animate: "slow",
    slide: function( event, ui ) { 
        $( "#magic" ).css('top', ui.value + 'px');
    }
});

For the div not moving, see slide(event, ui)

Triggered on every mouse move during slide.

So, it seems this event will not fire when the slider is set programmatically.

Upvotes: 1

hammus
hammus

Reputation: 2612

You need to look at $.animate()

This will allow you to animate the slider to the position you wish and you can set a time length in milliseconds.

additionally, I think the reason that the Trigger is not moving the div is that you are not interacting with the slide control within the slider object.

Upvotes: 0

Related Questions