JQuery 移动 slider 句柄(提供 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 时，它会按预期去除两个 slider 上的 slider handle 。有没有一种方法可以在移除底部 slider 上的 handle 的同时将 handle 保留在顶部 slider 上？

Answer 1

最简单的方法是将任何需要隐藏句柄的 slider 放置在容器 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;
}

Updated FIDDLE

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

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

jQM 在 INPUT 旁边创建一个 slider 轨道 DIV，因此 CSS 获取该 DIV 并使用 Adjacent Sibling selector 在其中找到句柄。

FIDDLE