Мобильный слайдер с двумя диапазонами jQuery

Question

Я сделал слайдер с двумя диапазонами в JQM, поместив слайдер друг на друга. Есть ли способ остановить минимальное превышение максимального значения?

Я не уверен, что слайдер использует тип ввода диапазона 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

Answer 1

Хотелось бы что-то вроде этой работы:

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

JS

$('#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;
}

Answer 2

Вы должны создать слайдер так: 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);
            }
        });            

    }
});

});

если что-то не понятно, спросите меня