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.