Slider setting values after init

Slider setting values after init


Hi everyone,
I'm working on a user interface and I want to use the slider from
jQuery.ui. Here is what I'm trying to make:
When someone loads the page, they see one slider with two handles and
they have the option to add more sliders below by clicking on a
button. All these sliders can have different values and can be saved
in a database. When they are saved and you return to the page, the
sliders need to be set on the saved values.
I'm now working on a test page where I have two sliders which are both
created with the same piece of javascript. I'm trying to set different
start-values for each of them, but I can not get it to work.
Here's my code:
<script>
$(".time-slider").slider({
        range: true,
        min: 0,
        max: 1440,
        step: 15,
        slide: function(event, ui) {
            //update the input form value
        }
});
//Set the different values
$("#time_1").find('.time-slider').slider('option', 'values', [540,
1020]);
$("#time_2").find('.time-slider').slider('option', 'values', [340,
920]);
$(".time-slider").each(function() {
        //set the form value
});
</script>
The problem with this code, is that the values are being set: the
input form gives the right values, but the problem is that the sliders
are both at the starting point of the slider (all the way to the
left). They won't go to the right position. When I click on one of the
sliders, they do move to the right position. It looks like after the
slider has been initiated, it needs to be updated as well in some way.
I've also tried the moveTo, but the wouldn't work either.
Can someone help me out?
Thnx,
Eswip