jQuery Slider Come si blocca un manico in atto?

Question

Ho un cursore jQuery con due maniglie. Sto cercando di bloccare la prima volta nel luogo in base alla seconda maniglia.

Ho provato controllando i valori sul presentazione eventi e quindi impostando il primo torna maniglia per la sua posizione di blocco ma ignora praticamente quello che ho impostato a e continua a scivolare.

Ho acquistato al lavoro con il di arresto evento ma è molto goffo.

Io sto usando un oggetto JSON generato dal serverside per popolare i miei cursori. Questo è il mio codice per l'evento di arresto:

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

Qualcuno ha qualche idea?

Fammi sapere se ho bisogno di elaborare.

Grazie! Daniel Brewer

Answer 1

Ecco un esempio rapido e sporco di come bloccare l'altra maniglia in relazione alla maniglia che viene trascinato:

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);
        }
    }
});

dovrebbe aiutare a capire come fare ciò che si vuole fare.

Esempio di lavoro: http://jsfiddle.net/cBHdD/

Answer 2

Ecco una versione leggermente meno rapido-n-sporco @ jsfiddle di PetersenDidit, che serrature maniglie in relazione tra loro ed anche fascette l'offset tra loro alle estremità dei cursori, per cui la gamma non può collassare sotto maxOff. La chiave è return false, per mantenere jquery-ui di applicare il valore di trascinamento corrente:

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/