CodingForums.com - Animate jquery ui slider handle to specific value on pageload

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Animate jquery ui slider handle to specific value on pageload (http://www.codingforums.com/showthread.php?t=286798)

Animate jquery ui slider handle to specific value on pageload

I'm having problems getting a slider to animate to a certain value. The value is within the handle. I want the handle to automatically move on pageload to a specific value. The value has to increment up to the value though.

I've created a script in where I'm animating the handle but I can't get the values to increment accordingly. Here is my current script.

Slider1:

Code:

$("#slider1").slider({

    max:350,

    min:100,

    step:10,

    value:100,

    animate: 'true',

        animate: 6000,

    slide: function(event, ui) {  

        $("#amount").val(ui.value);

        $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');

        

                update();

       

    } ,

    change :function(event, ui) {  

        $("#amount").val(ui.value);

        $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');

        

                update();       

    } 

});

$("#slider1").slider("value", 200);

update();

On page load, the value should start at 100 and then automatically increment in 10's up to 200. Although, 200 just appears.

Any help would be greatly appreciated. Cheers.

Can you please provide a full example, preferably a "working" version on jsfiddle? I just tried setting this up and besides update() not being defined and it looking not exactly nice – I do see the animation from 100 to 200.

Quote:

Originally Posted by Airblader (Post 1310079)

Hi Airblader, the handle animates fine. It's the value in the handle which I want to animate to go from 100 to 200 in increments of 10. Here is a fiddle: http://jsfiddle.net/vNf9K/

Thanks,

Jonny

Ok, I got this to work, although the animation isn't smooth.

Code:

$("#slider1").slider({

    max:350,

    min:100,

    step:10,

    value:100,

    slide: function(event, ui) {  

        $("#amount").val(ui.value);

        $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');

        

       

    } ,

    change :function(event, ui) {  

        $("#amount").val(ui.value);

        $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');

        

    } 

});

var val = 100;

var timer = setInterval(function() {

    if (val <= 200) {

        $("#slider1").slider("value", val);

        val += 10;

    }

    else {

        clearInterval(timer);

    }

}, 200);

It would be highly appreciated if anyone can make the animation smooth.

Cheers,

Jonny