Animate jquery ui slider handle to specific value on pageload

[jonnystudent]

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:

$("#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.

[Airblader]

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.

[jonnystudent]

Originally Posted by Airblader

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.

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

[jonnystudent]

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

$("#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