Ползунок JQuery UI - ползунок значения 2, определенное значение ползунка 1

Question

Я пытался заставить работать с помощью ползунка JQuery UI следующее.

У меня есть 2 слайдера, один - сумма, другой - продолжительность. Когда сумма меньше 200, вы можете выбрать 15 и 30 дней. Если сумма превышает 200 только 30 дней и ползунок следует отключить.

Я очень старался, вы можете увидеть мои эксперименты на jsfiddle. http://jsfiddle.net/prommetheus/jatcrsxv/

$('#howmuch_sld').slider({
    range: "min",
    value: 300,
    min: 50,
    step: 50,
    max: 600,
    slide: function(event, ui) {
        $('#amt').html('€' + ui.value);
    }
});
$('#amt').html('€' + $('#howmuch_sld').slider('value'));

$('#howlong_sld').slider({
    range: "min",
    value: 15,
    min: 15,
    step: 15,
    max: 30,
    slide: function(event, ui) {
        if($('#howmuch_sld').slider('value') > '200'){
            $('#howlong_sld').slider({
                value: 30,
                min: 15,
                step: 15,
                max: 45, // TO CENTER SLIDER HANDLER
                disabled: true,
            });
        };
        $('#day').html(ui.value + '<span class="small"> days</span>');
    }
});

$('#day').html($('#howlong_sld').slider('value') + '<span class="small"> days</span>');

Я надеюсь, что кто-то может помочь мне на правильном пути!

Answer 1

Из того, что я понимаю, ваша проверка неверна slide событие. Должно быть во время суммы slide так как это то, что будет иметь эффект. И вместо того, чтобы переделывать slider на слайде вы можете изменить options после того, как он был создан. Нечто подобное должно приблизить вас к вашей цели:

$('#howlong_sld').slider({
    range: "min",
    value: 15,
    min: 15,
    step: 15,
    max: 30,
    slide: function(event, ui) {
        $('#day').html($('#howlong_sld').slider('value') + '<span class="small"> days</span>');
    },
    //slide happens only when handle is actually moving, so it's always good
    //to update on stop as well 
    stop: function(event, ui) {
        $('#day').html($('#howlong_sld').slider('value') + '<span class="small"> days</span>');
    },
});

$('#howmuch_sld').slider({
    range: "min",
    value: 300,
    min: 50,
    step: 50,
    max: 600,
    slide: function(event, ui) {
        $('#amt').html('€' + ui.value);
        //You check your condition while amount is sliding.
        if($('#howmuch_sld').slider('value') > 200){
            //this is how you set variable after creation
            $('#howlong_sld').slider('option', 'value', 30);
            //you can also call methods
            $('#howlong_sld').slider('disable');

        } else {

            $('#howlong_sld').slider('enable');
        }
        $('#day').html($('#howlong_sld').slider('value') + '<span class="small"> days</span>');
    }
});
$('#amt').html('€' + $('#howmuch_sld').slider('value'));



$('#day').html($('#howlong_sld').slider('value') + '<span class="small"> days</span>'); 

http://jsfiddle.net/tmcyzcvc/1/