为不同的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;
}

我尝试使用输入的id单独设置：

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

他们没有工作。

谢谢你的时间！

Eylul

Answer 1

您无法直接更改jQuery Mobile 中输入的滑块的宽度。因为它不仅仅存在于input元素中。这就是你必须改变#div-slider的宽度的原因。

以下是演示：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。