Responsive slider range on the phone, solving with mousedown and jquery mouseup

Question

I have a slider jquery-ui, it does not have a good behavior in mobile, so I added some buttons plus and 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>

they are working well with the following code in jquery to change the values of the 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();
});

but this code only works with a first click. What I wanted to do is as long as the button keeps pressing it keeps changing Silder.

Does anyone know how to do that? can give me a strength, Please.

Answer 1

If possible to make your code available in a practical way we would be grateful, but in advance 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 realize that the code adds a spin and in the creation of the button is implemented a Timeout in the same, the functioning of your Slide differs from this example, but you can implement the same otherwise.

Follow the full code for analysis: http://jsfiddle.net/Mottie/TrQLK/1/light/