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); 
      } 
     } 
    }); 
});