3

レンジ スライダーのテキスト ボックスに 5000000 を表示しようとしていますが、残りの桁は 500000 しか表示されていませんが、表示されません。サイズを変更しようとしましたが、texbox はレンジ スライダーの位置を再配置しています。

<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/で問題を再生成しました。

4

1 に答える 1

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;
}
于 2013-03-16T10:35:51.450 に答える