JQuery UI слайдер - слайдер значения 2 определенный слайдер значения 1

Question

Ive пытался получить с JQuery UI слайдер для работы.

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

Ive много пытался, вы можете увидеть мои эксперименты на 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/