Question

在Jquerymobile范围滑块中，我可以设置一个从0到100的值，它将显示0到100.在我的情况下，我想设置范围从0到100和100+。如果用户推送结束，而不是显示值100，我如何将其显示为100+？

Answer 1

jQM rangelider中的输入为type="range"。此类型只接受数字，因此不能将文本“100+”设置为输入值。

一种解决方法可能是在100旁边放置一个'+'：

正在使用 DEMO

在rangelider标记中，我添加了一个带有labelPlus类的<span>：

<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类CSS最初隐藏了跨度，但绝对将它放在正确的位置：

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

Jquerymobile滑块系列+

2 个答案: