JQuery移动滑块句柄(提供JSFIDLE)

JQuery移动滑块句柄(提供JSFIDLE),jquery,html,css,jquery-mobile,Jquery,Html,Css,Jquery Mobile,下面是一个JSFIDLE: HTML: 我的问题是,当我添加上面的CSS时,它会像预期的那样删除两个滑块上的滑块手柄。是否有一种方法可以在移除底部滑块上的控制柄的同时保持顶部滑块上的控制柄?您可以使用更具体的选择器,如下所示: .ui-slider-handle.ui-btn.ui-shadow.ui-btn-a { display: none; #slider-1 + .ui-slider-track .ui-btn.ui-slider-handle { display: none

下面是一个JSFIDLE:

HTML:


我的问题是,当我添加上面的CSS时,它会像预期的那样删除两个滑块上的滑块手柄。是否有一种方法可以在移除底部滑块上的控制柄的同时保持顶部滑块上的控制柄?

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

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

}

简单的方法是将任何需要把手隐藏在容器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:

.ui-slider-handle.ui-btn.ui-shadow.ui-btn-a {
display: none;
#slider-1 + .ui-slider-track .ui-btn.ui-slider-handle {
    display: none;
}
jQM在输入旁边创建一个滑块轨迹DIV,因此CSS获取该DIV并使用


感谢您的帮助和到相邻兄弟选择器的链接!
#slider-1 + .ui-slider-track .ui-btn.ui-slider-handle {
    display: none;
}