0

Tenho um slider jquery-ui, ele não tem um comportamento bom em mobile, para isso adicionei uns botões de plus e less:

<div class="price">
    <div class="small-3 large-3 column" style="margin-top: -10px">
        <a class="money-mobile plus min">+</a>
        Min
        <div id="price-min" class="money-view">0</div>
        <a class="money-mobile less min">-</a>
    </div>
    <div class="small-6 large-6 column slider-money">
        <div class="slider" style="background: rgba(65, 65, 65, 0.4); border: 0"></div>
    </div>
    <div class="small-3 large-3 column" style="margin-top: -10px">
        <a class="money-mobile plus max">+</a>
        Max
        <div id="price-max" class="money-view">1000</div>
        <a class="money-mobile less max">-</a>
    </div>
</div>

ele estão funcionando bem com o seguinte código em jquery para alterar os valores do slider:

$(".money-mobile").mousedown(function(){
    var slider = $(".slider" );
    var values;
    var step = slider.slider("option", "step");
    var max = slider.slider("option", "max");
    var min = slider.slider("option", "min");

    //while(enquanto precionado){
        values = slider.slider("option", "values");

        if($(this).hasClass('max')){
            if($(this).hasClass('plus')){
                if(values[1] + step <= max){
                    slider.slider({values: [values[0], values[1] + step]});
                }
            }else if($(this).hasClass('less')){
                if(values[1] - step >= min) {
                    slider.slider({values: [values[0], values[1] - step]});
                }
            }
        }if($(this).hasClass('min')){
            if($(this).hasClass('plus')){
                if(values[0] + step <= max) {
                    slider.slider({values: [values[0] + step, values[1]]});
                }
            }else if($(this).hasClass('less')){
                if(values[0] - step >= min) {
                    slider.slider({values: [values[0] - step, values[1]]});
                }
            }
        }

        values = slider.slider("option", "values");
        $("#price-min").text(values[0]);
        $("#price-max").text(values[1]);
     //} até aqui
}).mouseup(function(){
    search();
});

porem esse código só funciona com um primeiro click. O que queria fazer é enquanto o botão continuar pressionado ele continuasse mudando o silder.

Alguem sabe como fazer isso? pode me dar uma força, please.

1 Resposta 1

1

Se possível disponibilizar de uma forma prática o seu código ficaríamos gratos, mas de antemão posso adiantar esse código:

// repeat scroll while holding down button
    repeater = function(b) {
        scrollContent.css("margin-left", function(i, v) {
            var v = parseInt(v, 10) + (b ? iw : -iw);
            v = v < -c + p ? -c + p : v > 0 ? 0 : v;
            return v + 'px';
        });
        resetValue();
        repeat = setTimeout(function() {
            repeater(b);
        }, scrollSpeed);
    };

// make buttons
scrollPane.find('button').button().bind('mousedown', function() {
    repeater($(this).is('.left'));
}).bind('mouseup mouseleave', function() {
    clearTimeout(repeat);
});

Na primeira parte podemos perceber que o código adiciona um giro e na criação do botão é implementado um TimeOut no mesmo, o funcionamento do seu Slide difere deste exemplo, mas você pode implementar o mesmo de outra forma.

Segue o código completo para analise: http://jsfiddle.net/Mottie/TrQLK/1/light/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .