jquery-mobile - 在 jquery 移动范围滑块中需要显示 6 位值

Question

在范围滑块文本框中，我尝试显示 5000000 但它仅显示 500000 其余数字可用但不可见我尝试更改大小但 t​​exbox 它正在重新排列范围滑块的位置。

<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>

如何在不重新排列滑块的情况下支持价值 5000000。所以任何人都有想法，以便我可以解决这个问题。我在提琴手http://jsfiddle.net/8xVWY/100/中重新生成了这个问题

Answer 1

我给你做了一个工作的例子：http: //jsfiddle.net/Gajotres/8xVWY/110/

jQuery Mobile 版本 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;
}