Question

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?

Answer 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/