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
Post a Comment