Eylül Kilsedar February 2016

setting different width to different jquery sliders

I have multiple sliders and I want to set different widths to them.

Here is the 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 I do that?

I know that I can change the width like this:

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

I tried to set individually, using the id of the 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 they did not work.

Thanks for your time!

Eylul

Answers


claytoncasey01 February 2016

Just using the ID of the slider works fine for me.

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

You can view the Pen Here.


clyz February 2016

You can't change directly the width of sliders input in jQuery Mobile. Because it's not exist only from input element. That's why you have to change #div-slider's width.

Here is a 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;
}

Post Status

Asked in February 2016
Viewed 1,294 times
Voted 13
Answered 2 times

Search




Leave an answer