CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
Eylül
Eylül

Reputation: 139

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

Upvotes: 0

Views: 103

Answers (2)

clyz
clyz

Reputation: 165

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;
}

Upvotes: 1

claytoncasey01
claytoncasey01

Reputation: 150

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.

Upvotes: 0

Related Questions