responsive slider range on the phone, resolving with mousedown and jquery mouseup

Question

responsive slider range on the phone, resolving with mousedown and jquery mouseup

Navigation

#1 by (1 votes)

0

I have a slider jquery-ui, it does not have good behavior in mobile, so I added a plus and minus buttons:

<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>

It works fine with the following code in jquery to change the slider values:

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

But this code only works with a first click. What I wanted to do is as long as the button continues to be pressed it will continue to change the silder.

Does anyone know how to do this? can give me a force, please.

jquery-ui eventos-do-mouse slider

asked by anonymous 08.12.2015 / 15:07

1 answer

How to run an applet in java in the browser How to insert information into a Json object?

score 1 · Accepted Answer

If it is possible to make your code available in a practical way, we would be grateful, but beforehand I can advance this code:

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

In the first part we can see that the code adds a twist and in the creation of the button is implemented a TimeOut in it, the operation of your Slide differs from this example, but you can implement the same in another way.

Here is the complete code for analysis: link