JQuery移动滑动条句柄(JSFiddle提供)

Question

这是一个JSFiddle:

https://jsfiddle.net/vxee5b79/7/

HTML:

<input type="range" name="slider-1" id="slider-1" min="1" max="9951" value="1" step="50">
<div data-role="rangeslider" data-track-theme="b" data-theme="a">
  <input type="range" name="range1" id="range1" disabled="disabled" min="0" max="10">
  <input type="range" name="range2" id="range2" disabled="disabled" value="10">
</div>

CSS:

.ui-btn.ui-slider-handle {
    display: none;
}

我的问题是，当我添加上述CSS时，它会按预期拿走两个滑块上的滑块手柄。是否有一种方法，我可以保持手柄在顶部滑块，同时去除底部滑块上的手柄?

Answer 1

简单的方法是将需要句柄的滑块隐藏在容器div:

<div class="hiddenHandle">
    <input type="range" name="slider-1" id="slider-1" min="1" max="9951" value="1" step="50">    
</div>
<div data-role="rangeslider" data-track-theme="b" data-theme="a">        
    <input type="range" name="range1" id="range1" disabled="disabled" min="0" max="10" value="2">        
    <input type="range" name="range2" id="range2" disabled="disabled" min="0" max="10" value="6">   
</div>

然后CSS可以使用这个类:

.hiddenHandle .ui-btn.ui-slider-handle {
    display: none;
}

<

更新strong>小提琴

如果你不需要容器，你可以这样使用CSS:

#slider-1 + .ui-slider-track .ui-btn.ui-slider-handle {
    display: none;
}

jQM在INPUT旁边创建一个滑块轨道DIV，因此CSS使用邻接兄弟选择器

获取该DIV并查找其中的句柄。

小提琴

Answer 2

您可以使用更具体的选择器，像这样:

.ui-slider-handle.ui-btn.ui-shadow.ui-btn-a {
display: none;

}