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

更新FIDDLE

如果你不想要容器，你可以像这样使用 CSS：

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

jQM 在 INPUT 旁边创建一个滑块轨道 DIV，因此 CSS 获取该 DIV 并使用 Adjacent Sibling selector

在其中找到句柄

FIDDLE

Answer 2

您可以使用更具体的选择器，如下所示：

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

}