Jquerymobile滑塊範圍+

Question

在Jquerymobile範圍滑塊中，我可以設置一個從0到100的值，它會顯示0到100.在我的情況下，我想設置範圍從0到100和100+。如果用戶推動結束，而不是顯示100的值，我該如何顯示它爲100+？

Answer 1

jQM rangeslider中的輸入爲type="range"。這種類型只接受數字，所以文本'100+'不能被設置爲輸入的值。

一個解決辦法可能是隻定位一個 '+' 旁邊100：

工作DEMO

在rangeslider標記，我添加了一個<span>一類的labelPlus：

<div data-role="rangeslider"> 
    <label for="range-1a">Rangeslider:</label> 
    <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40" /> 
    <label for="range-1b">Rangeslider:</label> 
    <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80" /> 
    <span class="labelPlus">+</span> 
</div> 

labelPlus class CSS最初隱藏了t他跨越但是絕對定位它在正確的位置：

.labelPlus{ 
    display: none; 
    position: absolute; 
    right: 0px; 
    font-size: 14px; 
    font-weight: bold; 
    text-align: right; 
    width: 48px; 
    line-height: 30px; 
    margin-right: 18px; 
    margin-top: 8px; 
} 

最後在JavaScript中，我們處理輸入的變化事件，並檢查是否我們在100。如果是的話，表明跨度：

$("#range-1b").on("change", function(){ 
    var val = $(this).val(); 
    if (parseInt(val) >= 100) { 
     $(".labelPlus").show();    
    } else { 
     $(".labelPlus").hide(); 
    } 
});  

Answer 2

我已經創建了Fiddle。

$(function() { 
    $("#slider").slider({ 
     range: true, 
     min: 0, 
     max: 110, 
     slide: function(event, ui) { 
      if(ui.value>100) 
      { 
       $("#ammount").text("100+") 
      } 
      else 
      { 
$("#ammount").text(ui.value); 
      } 
     } 
    }); 
});