Как я могу изменить параметры пользовательского интерфейса слайдера jQuery UI?

У меня есть слайдер jQuery UI на моей странице. Он начинается с:

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

Который отлично работает.

У меня есть элемент выбора рядом с ним с параметрами 6, 12 и 24. Чего я хотел бы добиться, так это того, чтобы пользователь выбрал 12, а шаг ползунка, минимум и значение были равны 12 (то же самое для 24). Я уже пытался построить функцию:

$('#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 );
});

Однако все, что это делает, это переход к значению 12, затем при нажатии на ползунок он переходит до конца (120) и просто остается там.

Мне нужно уничтожить ползунок и сделать его снова с нуля?

РЕДАКТИРОВАТЬ №1:

Я только что скачал Firebug и проверил ползунок с помощью консоли, и все значения возвращаются правильно (минимум = 12, значение = 12, шаг = 12, максимум = 120). Кто-нибудь знает, почему он такой упрямый и прыгает/держится до конца?


javascript html jquery jquery-ui jquery-ui-slider
person Lil' Bits    schedule 03.04.2012    source источник
comment
Можете ли вы показать нам демо об этом?   -  person Starx    schedule 04.04.2012
comment
Я сделаю скрипку и посмотрю, будет ли она делать то же самое.   -  person Lil' Bits    schedule 04.04.2012

Ответы (2)


arrow_upward
2
arrow_downward

Нашел проблему. Вам нужно проанализировать значение от <select> до int, прежде чем использовать его для изменения параметров ползунка.

$('#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 );
});

Рабочий пример

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

person OACDesigns    schedule 03.04.2012
comment
Спасибо за образец скрипки! Если завтра никто не сможет сказать мне, почему мой ползунок ведет себя странно, я, вероятно, просто сделаю это; За исключением того, что я не буду предварительно создавать 3 ползунка, я создам их на основе значений в выбранном объекте, потому что компания может попросить добавить туда дополнительные значения позже. - person Lil' Bits; 04.04.2012
comment
Я только что изменил этот ответ. Не знаю, видели ли вы его до или после меня. Этот новый работает так, как вам нужно. - person OACDesigns; 04.04.2012
comment
ТРИЛЛИОН ПРИЗНАКОВ ВАМ! Это сводило меня с ума на несколько дней! Большое спасибо! - person Lil' Bits; 04.04.2012

arrow_upward
0
arrow_downward

Реализация правильная. Но вы можете кэшировать результаты

$('#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 );
});
person Starx    schedule 03.04.2012
comment
Нет извините. Это не решило проблему. И я знаю, что могу кэшировать $(this).val() / this.value, просто не видел причин для этого. - person Lil' Bits; 04.04.2012