I have a jQuery UI slider on my page. It starts out with:

$( "#slider" ).slider({
    value: 6,
    min: 6,
    max: 120,
    step: 6
});

Which works fine.

I have a select element next to it with 6, 12, and 24 as options. What I would like to accomplish is for the user to select 12, and the slider's step, min, and value all go to 12 (same for 24). I have already tried to build a function:

$('#dropdown').change(function(){
    $( "#slider" ).slider( "option", "value", $(this).val() );
    $( "#slider" ).slider( "option", "min", $(this).val() );
    $( "#slider" ).slider( "option", "step", $(this).val() );
    $( "#slider" ).slider( "option", "max", 120 );
});

However all this does is make is go to value 12, then upon clicking the slider, it jumps all the way to the end (120) and just stays there.

Do I need to destroy the slider and make it again from scratch?

EDIT #1:

I did just download Firebug and check the slider with the console, and the values are all returning correct (min=12,value=12,step=12,max=120). Does anyone know why it's being so stubborn and jumping/sticking to the end?

2012-04-03 23:07
by Lil' Bits

Can you show us a demo regarding this - Starx 2012-04-04 00:21

I'll make a fiddle, and see if it does the same thing - Lil' Bits 2012-04-04 00:24

Found the issue. You need to parse the value from the <select> to an int before you use it to change the options of the slider.

$('#dropdown').change(function()
{
    var currentVal =  parseInt($("#slider").slider("value"));
    var newOptions = parseInt($(this).val());
    $( "#slider" ).slider( "value", currentVal);
    $( "#slider" ).slider( "option", "min", newOptions );
    $( "#slider" ).slider( "option", "step", newOptions );
    $( "#slider" ).slider( "option", "max", 120 );
});

Working Example

http://jsfiddle.net/DigitalBiscuits/VSBCT/1/

2012-04-03 23:42
by OAC Designs

Thanks for the fiddle sample! If nobody else can tell me why my slider is acting weird by tomorrow, I'll probably just do this; Except I won't pre-create the 3 sliders, I'll create them based on the values in the select object, because the company may ask for more values to be put in there later - Lil' Bits 2012-04-04 00:12

I've just changed this answer. Not sure if you saw it before or after I did. This new one works as you need it to - OAC Designs 2012-04-04 00:15

A TRILLION KUDOS TO YOU! This drove me nuts for days! Thank you SO much - Lil' Bits 2012-04-04 00:34

no problem man : - OAC Designs 2012-04-04 00:37

Implementation is correct. But you can cache the results

$('#dropdown').change(function(){
    var val = this.value;
    $( "#slider" ).slider( "option", "value", val );
    $( "#slider" ).slider( "option", "min", val );
    $( "#slider" ).slider( "option", "step", val );
    $( "#slider" ).slidYou can er( "option", "max", 120 );
});

2012-04-03 23:54
by Starx

No, sorry. This did not solve the problem. And I know that I can cache $(this).val() / this.value, I just didn't see a reason to - Lil' Bits 2012-04-04 00:01

How can I have the user change options of the jQuery UI Slider?

Working Example