jQuery Mobile Dual Range slider

Я сделал двухдиапазонный слайдер в JQM, поместив слайдер поверх друг друга. Есть ли способ остановить мин, превышающий максимальное значение?jQuery Mobile Dual Range slider

Я не уверен, что слайдер использует диапазон HTML5 тип входа

<style type="text/css"> 
      .priceRangeInfo{ 
       position: relative; 
       height: 30px; 
       margin-top: 60px; 
      } 
      .priceRangeInfo label{ 
       position: absolute; 
       top: -30px; 
       left: 10px; 
      }       /* moves label field */ 
      .priceRangeInfo #buying_slider_min{ 
       top: -40px; 
       position: absolute; 
       left: 100px; 
      }  /* moves first input field */ 
      .priceRangeInfo #buying_slider_max{ 
       top: -40px; 
       position: absolute; 
       left: 170px; 
      }  /* move second input field */ 
      .priceRangeInfo div.ui-slider{ 
       position: absolute; 
      }     /* move both sliders - adressing 1st slider with CSS is hard */ 
      .priceRangeInfo div:last-child{ 
       position: absolute; 
       left: 0px; 
      }     /* correct 2nd slider position to fit exactly on top of 1st slider */ 
     </style> 
     <div class="priceRangeInfo"> 
       <label for="buying_slider_min">Price</label> 
       <input type="range" name="buying_slider_min" id="buying_slider_min" class="minBuyingSlider" value="0" min="0" max="100" /> 
       <input type="range" name="buying_slider_max" id="buying_slider_max" class="maxBuyingSlider" value="100" min="0" max="100" /> 
     </div>

Просто нашел YUI имеет большой двойной слайдер, который прекрасно работает с JQM !!!

http://developer.yahoo.com/yui/examples/slider/slider_dual_with_highlight.html

источник

2012-01-17 John Kim

Пожалуйста, измените вопрос с некоторыми примерами кода вы пытались и/или http://jsfiddle.net –

извините, но не может положить в jsfiddle, поскольку они должны содержать некоторые изображений. Я разместил код выше –

YUI двойной слайдер, который вы указали, похоже, не работает на моем телефоне Android. Не уверен, что это жизнеспособный вариант для всех, кто работает на мобильных устройствах. – JStark

Would что-то вроде этой работы:

http://jsfiddle.net/NkjQr/2/
http://jsfiddle.net/NkjQr/3/ (Еще немного глючит)

$('#buying_slider_min').change(function() { 
    var min = $(this).val(); 
    var max = $('#buying_slider_max').val(); 

    if(min > max) { 
     $('#buying_slider_max').val(min); 
     $('.maxBuyingSlider').slider('refresh'); 
    } 
});

HTML

<div class="priceRangeInfo"> 
     <label for="buying_slider_min">Price</label> 
     <input type="range" name="buying_slider_min" id="buying_slider_min" class="minBuyingSlider" value="0" min="0" max="100" /> 
     <input type="range" name="buying_slider_max" id="buying_slider_max" class="maxBuyingSlider" value="100" min="0" max="100" data-track-theme="b"/> 
</div>

CSS

.priceRangeInfo{ 
    position: relative; 
    height: 30px; 
    margin-top: 60px; 
} 
.priceRangeInfo label{ 
    position: absolute; 
    top: -30px; 
    left: 10px; 
}       /* moves label field */ 
.priceRangeInfo #buying_slider_min{ 
    top: -40px; 
    position: absolute; 
    left: 100px; 
}  /* moves first input field */ 
.priceRangeInfo #buying_slider_max{ 
    top: -40px; 
    position: absolute; 
    left: 170px; 
}  /* move second input field */ 
.priceRangeInfo div.ui-slider{ 
    position: absolute; 
}     /* move both sliders - adressing 1st slider with CSS is hard */ 
.priceRangeInfo div:last-child{ 
    position: absolute; 
    left: 0px; 
}

источник

2012-01-17 15:08:25

Эй, спасибо за помощь, но есть ли способ, которым мы можем заставить его не глючить? Я попробовал jQuery UI и другие на JQM, но ничего не работает, поскольку сам JQM использует слайдер() как функцию для javascript. Есть ли способ, по которому мы можем препятствовать тому, чтобы указатель переходил через мин или макс друг друга? –

Опубликовано: https://github.com/jquery/jquery-mobile/pull/2401 –

вы должны создать ползунок так: HTML:

<div id="slider-container-zucker" class="slider_style"></div>

и JS:

$(function() { 

$('#slider-container-zucker').slider({ 
    range: true, 
    min: 0, 
    max: 9, 
    values: 0, 9, 
    change: function (event, ui) { 
     $.ajax({ 
      type: "GET", 
      url: url, 
      success: function (result) { 
       $("#Result").html(result); 
      } 
     });    

    } 
});

});

если что-то не понятно, вы можете спросить меня

источник

2012-08-22 10:16:01

ответ

Смежные вопросы