javascript - setting different width to different jquery sliders -


i have multiple sliders , want set different widths them.

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

how can that?

i know can change width this:

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

i tried set individually, using id of input:

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

or

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

and did not work.

thanks time!

eylul

you can't change directly width of sliders input in jquery mobile. because it's not exist input element. that's why have change #div-slider's width.

here demo: 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; } 

Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -