Hi Newbie here.  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:

1. $("#slider1").slider({
2.     max:350,
3.     min:100,
4.     step:10,
5.     value:100,
6.     animate: 'true',
7. animate: 6000,
8.     slide: function(event, ui) {  
9.         $("#amount").val(ui.value);
10.         $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');
11.         
12.                 update();
13.        
14.     } ,
15.     change :function(event, ui) {  
16.         $("#amount").val(ui.value);
17.         $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');
18.         
19.                 update();       
20.     } 
21. });
22. $("#slider1").slider("value", 200);
23. update();

On pageload, 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.