jQuery Mobile雙量程滑塊

我通過將滑塊放在彼此頂部，在JQM中製作了雙量程滑塊。有沒有辦法阻止分鐘超過最大值？jQuery Mobile雙量程滑塊

我不知道滑塊是用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 – 2012-01-17 14:43:01

抱歉，但不能把在的jsfiddle，因爲他們需要包含一些圖片。我已經發布了一些代碼 – 2012-01-17 14:52:03

YUI雙滑塊你引用似乎並沒有在我的Android手機上工作。不知道這對於任何在移動設備上工作的人來說都是可行的選擇。 – JStark 2012-11-07 21:59:00

會是這樣的工作：

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本身使用slider（）作爲javascript的函數。有沒有一種方法可以防止指針超過min或max對方？ – 2012-01-18 09:36:46

有關：https：//github.com/jquery/jquery-mobile/pull/2401 – 2012-01-18 14:13:26

必須創建滑塊，使： 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

jQuery Mobile雙量程滑塊

回答

相關問題