Curseur jQuery Comment verrouiller une poignée en place?

Question

J'ai un curseur jQuery avec deux poignées. Je cherche à verrouiller le premier en place basé sur la deuxième poignée.

J'ai essayé de vérifier les valeurs sur l'événement diapo puis de remettre la première poignée à sa position de verrouillage mais elle ignore fondamentalement ce que je l'ai défini et continue à glisser.

Je l'ai eu pour fonctionner avec l'événement stop mais son très maladroit. J'utilise un objet JSON généré à partir du serveur pour remplir mes curseurs. Ceci est mon code pour l'événement d'arrêt:

$(clientID).slider({ 
     range: true, 
     max: slider.max, 
     values: [slider.minVal, slider.maxVal], 
     change: afterSliderChanged, 
     stop: onSliderStop 
    }); 

    function onSliderStop(event, ui) { 
    for (i in sliders.sliders) { 
     var slider = sliders.sliders[i]; 
     var clientID = slider.cellType + "_" + slider.objectID + "_null"; 

     if (this.id == clientID) { 
      if (ui.values[0].toString() == slider.max.toString()) { 
       var values = $(this).slider('option', 'values'); 
       $(this).slider('option', 'values', [parseInt(slider.max - 1), parseInt(values[1])]); 
      } 
     } 
    } 

Vous avez des idées? Faites-moi savoir si j'ai besoin d'élaborer.

Merci! Daniel Brewer

Answer 1

Voici un exemple rapide et sale de la façon de verrouiller l'autre poignée par rapport à la poignée qui est traîné:

var offset = 40; 
$('#slider').slider({ 
    range: true, 
    max: 600, 
    values: [40, 80], 
    slide: function(e,ui){ 
     if (ui.value == ui.values[0]) { 
      $(this).slider('values',1, ui.value+offset); 
     } else { 
      $(this).slider('values',0, ui.value-offset); 
     } 
    } 
}); 

devrait vous aider à comprendre comment faire ce que vous voulez faire.

Exemple de travail: http://jsfiddle.net/cBHdD/

Answer 2

Voici un peu moins version rapide-n-sale de jsFiddle de @ PetersenDidit, que les serrures poignées en relation les uns aux autres et pinces aussi entre les décalage aux extrémités des curseurs, de sorte la plage ne peut pas s'effondrer en dessous de maxOff. La clé est return false, de garder jquery-ui d'appliquer la valeur de déplacement en cours:

var max = 600; 
var maxOff = 40; 

$('#slider').slider({ 
    range: true, 
    max: max, 
    values: [40, 80], 
    slide: function(e,ui){ 
     if (ui.value == ui.values[0]) { 
      $(this).slider('values', 1, ui.value+maxOff); 
      if (ui.value >= max - maxOff) { 
       $(this).slider('values', 0, max - maxOff); 
       return false; 
      } 
     } else { 
      $(this).slider('values',0, ui.value-maxOff); 
      if (ui.value <= maxOff) { 
       $(this).slider('values', 1, maxOff); 
       return false; 
      } 
     } 
    } 
}); 

http://jsfiddle.net/tbWE5/