установка различной ширины на различные слайдеры jQuery

Question

У меня есть несколько слайдеров, и я хочу установить для них разную ширину.

Вот HTML:

<div id="div-slider-layer-trans-1"> 
    <input type="range" name="slider-layer-1" id="slider-layer-1" value="1" min="1" max="16" step="1" data-highlight="true"> 
    <input type="range" name="slider-trans-1" id="slider-trans-1" value="80" min="0" max="100" step="20" data-highlight="true"> 
</div> 

Как я могу это сделать?

Я знаю, что я могу изменить ширину примерно так:

.ui-slider-track { 
    width: 500px; 
} 

Я попытался установить индивидуально, используя идентификатор входа:

#slider-layer-1 .ui-slider-track.ui-shadow-inset.ui-bar-inherit.ui-corner-all { 
    width: 800px; 
} 

ИЛИ

#slider-layer-1 .ui-slider-track 
    width: 800px; 
} 

и они не сработали.

Спасибо за ваше время!

Eylul

Answer 1

Вы не можете изменить ширину ползунков ввода в jQuery Mobile. Потому что это не существует только из входного элемента. Вот почему вам нужно изменить ширину # div-ползунка.

Вот демо: https://jsfiddle.net/u2j24x25/5/

<div id="div-slider1"> 
    <input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true"> 
    </div> 
    <div id="div-slider2"> 
    <input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true"> 
    </div> 
    <div id="div-slider3"> 
    <input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true"> 
    </div> 

    /* CSS */ 

#div-slider1 { 
    width:100px; 
} 
#div-slider2 { 
    width:200px; 
} 
#div-slider3 { 
    width:300px; 
} 

Answer 2

Просто с помощью ID слайдера работает хорошо для меня.

#slider-layer-1 { 
    width: 500px; 
    } 
    #slider-trans-1 { 
    width: 800px; 
    } 

Вы можете просмотреть ручку Here.