jquery range slider not sliding after changing min value after init

Question

I init my range slider on loading of the page:

$("#slider").slider({
            range: true,
            min: 634606,
            max: 734818,
            step: 1,
            values: [634606, 734818]
})

on user input (html form) i retrieve data from the server with an ajax request. The data has to limit the slider (user input). I'm trying to achieve this with the following syntax:

// set new data values
$('#slider').slider('values',1, time[1]);
$('#slider').slider('values',0, time[0]);
// set new min/max limits
$("#slider").slider("option","max", time[1] );
$("#slider").slider("option","min", time[0] );

after using the min option the handles won't be able to move anymore. If i comment this last line out it is possible to move the handles. Am i handling the slider wrong? I even tried destroying the slider and re-initiate it with new values, without luck...

Answer 1

You can set the values by passing in an object, like this:

$("#slider").slider({ min: time[0], max: time[1], values: time });

If time[] has more values in it, then your object should be like this instead:

$("#slider").slider({ min: time[0], max: time[1], values: [time[0], time[1]] });

Doing it like the code above should solve your min/max issues, if you want to stick to your current method, then set values like this:

$("#slider").slider("option", "values", time); //or...
$("#slider").slider("option", "values", [time[0],time[1]]);

Answer 2

i found the real issue...the matter was the time array contains string values instead of numeric. Which is coming from the ajax-request. This was conflicting the slider handlers.

I solved it with the following code:

$("#slider").slider("option","max", parseFloat(time[1]) );
$("#slider").slider("option","min", parseFloat(time[0]) );

Thanks for the info though!