Curseur jQuery Ui - limite la plage

Question

En utilisant l'interface jQuery, je souhaite utiliser 2 curseurs individuels, tous les deux ayant une plage de 0 à 100 (pas un seul curseur avec 2 poignées). Lorsque le premier curseur est déplacé sur '40', je souhaite que les curseurs soient limités et que le second ne puisse être déplacé que jusqu'à '60', c'est-à-dire qu'il ne puisse pas être déplacé après 60 - c'est-à-dire qu'il y a une limite totale entre les deux curseurs de 100.

Est-ce possible?

Answer 1

Vous pouvez piéger l'événement slide et l'annuler (return false) si la valeur totale de vos curseurs dépasserait 100:

$('.slider').slider({ 
    min: 0, 
    max: 100, 
    slide: function (ev, ui) { 
     var total = ui.value; 
     $('.slider').not(this).each(function() { 
      total += $(this).slider('value'); 
     }) 
     if (total > 100) { 
      return false; 
     } 
     $('#total').text(total); 
    } 
}); 

démo à http://jsfiddle.net/alnitak/zFYjW/4/