Slider jQuery Como faço para travar uma alça no lugar?

Question

Eu tenho um controle deslizante de jQuery com duas alças. Estou procurando bloquear o primeiro no lugar com base no segundo identificador.

Eu tentei verificar os valores no deslizar Evento e, em seguida, configurar a primeira alça de volta para a posição de bloqueio, mas basicamente ignora o que eu a configuro e continua a deslizar.

Eu consegui funcionar com o Pare evento, mas é muito desajeitado.

Estou usando um objeto JSON gerado a partir do servidor para preencher meus controles deslizantes. Este é o meu código para o evento de parada:

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

Alguém tem alguma ideia?

Deixe -me saber se eu precisar elaborar.

Obrigado! Daniel Brewer

Answer 1

Aqui está um exemplo rápido e sujo de como bloquear a outra alça em relação à alça que está sendo arrastada:

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

Deve ajudá -lo a descobrir como fazer o que você quer fazer.

Exemplo de trabalho: http://jsfiddle.net/cbhdd/

Answer 2

Aqui está uma versão um pouco menos rápida do JSfiddle do @PeterSendidit, que trava lida em relação um ao outro e também prende o deslocamento entre eles nas extremidades dos controles deslizantes, para que o alcance não possa entrar em colapso abaixo maxOff. A chave é return false, para impedir que o jQuery-ui aplique o valor de arrasto atual:

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/