CODEWITHSUNDEEP
jquery-mobile
Inder Singh
Inder Singh

Reputation: 75

In jquery mobile range slider need to display 6 digit value

In the range slider text box i am try to show 5000000 but it is showing only 500000 rest of the digits is available but not visible i try to change the size but the texbox it is rearranging the position of range slider.

<form>
    <div data-role="rangeslider">
        <label for="minPrice">Price Range &#40;&pound;&#41;</label>
        <input type="range" name="minPrice" id="minPrice" min="0" max="5000000" value="0">
        <label for="maxPrice">Price Range &#40;&pound;&#41;</label>
        <input type="range" name="maxPrice" id="maxPrice" min="0" max="5000000" value="5000000">
    </div>
</form>

How to support value 5000000 without rearrangement of slider.So anyone have idea so that i can solve this issue.I have regenerated the issue in fiddler http://jsfiddle.net/8xVWY/100/

Upvotes: 3

Views: 1224

Answers (1)

Gajotres
Gajotres

Reputation: 57309

I made you a working example: http://jsfiddle.net/Gajotres/8xVWY/110/

Solution for jQuery Mobile version 1.4 + : http://jsfiddle.net/Gajotres/vJa7Z

HTML :

<form>
    <div data-role="rangeslider" id="custom-slider">
        <label for="minPrice">Price Range &#40;&pound;&#41;</label>
        <input type="range" name="minPrice" id="minPrice" min="0" max="5000000" value="0">
        <label for="maxPrice">Price Range &#40;&pound;&#41;</label>
        <input type="range" name="maxPrice" id="maxPrice" min="0" max="5000000" value="5000000">
    </div>
</form>

CSS :

#custom-slider .ui-rangeslider-sliders {
    margin: 0.5em 100px !important;
}

#custom-slider input.ui-input-text.ui-slider-input {
    width: 70px !important;
}

Upvotes: 1

Related Questions