Как обрабатывать стиль на входе = диапазон в jquery mobile?

Question

Я хочу, чтобы стиль html5 вводил «диапазон». Я пытаюсь создать мобильный сайт, используя jquerymobile, но с небольшими проблемами по его правильному стилю.

Я хочу иметь две метки, по одной на каждом конце диапазона выбора, и хочу, чтобы «перо» было черным тонким штрихом.

Сейчас у меня есть что-то вроде этого

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