CODEWITHSUNDEEP
jquery-mobile
user2699714
user2699714

Reputation: 43

Jquerymobile Slider range +

In Jquerymobile range slider, I can set a value from 0 to 100 and it will show 0 to 100. In my case, I would like to set the range from 0 to 100, and 100+. If the user pushes to end, instead of showing the value of 100, how can I show it as 100+?

Upvotes: 0

Views: 166

Answers (2)

ezanker
ezanker

Reputation: 24738

The inputs in the jQM rangeslider are type="range". This type only accepts numbers, so the text '100+' cannot be set as the value of the input.

One workaround could be to just position a '+' next to the 100:

Working DEMO

In the rangeslider markup, I have added a <span> with a class of 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>

The labelPlus class CSS initially hides the span but absolutely positions it in the correct spot:

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

Finally in javascript we handle the change event on the input and check to see if we are at 100. If so, show the span:

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

Upvotes: 2

Sanjay
Sanjay

Reputation: 2008

I have created 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 );
             }
         }
     });
});

Upvotes: 0

Related Questions