gpt4 book ai didi

JQuery 移动 slider 句柄(提供 JSFiddle)

转载 作者:太空宇宙 更新时间:2023-11-04 02:54:46 24 4
gpt4 key购买 nike

这是一个 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 上?

最佳答案

最简单的方法是将任何需要隐藏句柄的 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

关于JQuery 移动 slider 句柄(提供 JSFiddle),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32343580/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com