jquery mobileでinput = rangeのスタイルを処理する方法は？

Question

html5入力タイプ 'range'のスタイルを設定します。 jquerymobileを使用してモバイルウェブサイトを作成しようとしていますが、正しい方法でスタイリングするのは少し面倒です。

範囲セレクタの両端に1つずつ2つのラベルを付け、「ペン」を黒い細いストロークにしたいとします。

今私は私が自分で解決策を見つけたこの

<label for="slider">None</label> 
<input type="range" name="slider" id="slider" value="0" min="0" max="100" /> 
<label for="slider" style="text-align: right;">Many</label> 

Answer 1

のようなものを持っています。

<style type="text/css" media="screen"> 
    /* Hide text-field*/ 
    #slider { 
     display: none; 
    } 
    div.ui-slider { 
     width: 90%; 
    } 
    label.ui-block-right{ 
     text-align: right; 
     float: right; 
    } 
    .min-width-480px div.ui-slider { 
     width: 90%; 
    } 
    .min-width-480px label.ui-slider { 
     width: 50%; 
    }    
    /* Slider is displayed as a thin stroke */ 
    .ui-slider .ui-slider-handle { 
     width:2px; 
     height:30px; 
     background:url(images/slider-picker.gif) repeat-y; overflow: hidden; 
     position:absolute; 
     border-style:none; 
     margin-left: 0px; 
     margin-top: -15px; 
    } 
</style> 

そしてHTML

<div data-role="fieldcontain"> 
<input type="range" name="slider" id="slider" value="0" min="0" max="100" /> 
<div class="ui-grid-a" > 
    <div class="ui-block-a"><label for="slider">None</label></div> 
    <div class="ui-block-b"><label class="ui-block-right" for="slider">Many</label></div> 
</div> 
</div>