0

Trying to get a jquery ui slider handle to automatically slide to a value on page load.

Here is the Fiddle, just to see what I'm trying to do.

I want slider1 to slide to a value of 200 and slider2 to slide to the value of 14 on page load.

$("#slider1").slider({
    max:350,
    min:100,
    step:10,
    value:100,
    animate: 'true',
    slide: function(event, ui) {  
        $("#amount").val(ui.value);
        $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');

                update();
       setTimeout("$('#slider1').slider('value', 200);", 350);
    }    
});
$('#slider').slider('value', 200);

I've looked at animate but I'm getting no where.

How do I do this?

Jonah
  • 283
  • 2
  • 5
  • 20

1 Answers1

1

In your fiddle I just added a change event with the same code as slide

change :function(event, ui) {  
        $("#amount").val(ui.value);
        $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');
        update();
}

and this at the end

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

and it works! http://jsfiddle.net/ktNTa/4/

Konstant
  • 2,179
  • 16
  • 32
  • How do I make this animate slower and also count upto the value, as when I page load, it just jumps to 200. @Konstant – Jonah Oct 29 '12 at 15:56
  • Ok, I've made it animate slower by using 'animate: 5000,'. But its still not counting up to the value in the handle or in other areas. – Jonah Oct 29 '12 at 16:15
  • 1
    just use a separate timer for counting up the values..http://stackoverflow.com/q/2540277/630321 – Konstant Oct 29 '12 at 18:32
  • Thank You @Konstant This works a treat, although I've lost all my CSS in the handle. – Jonah Oct 30 '12 at 11:10