Как работать со стилем на input = range в jquery mobile?

Question

Я хочу стилизовать тип ввода html5 'range'. Я пытаюсь создать мобильный веб-сайт, используя 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>