jquery-ui滑块手柄的最终位置是100% - 将它放在滑块外面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery-ui滑块手柄的最终位置是100% - 将它放在滑块外面相关的知识,希望对你有一定的参考价值。

我是第一次使用jQuery-ui滑块,并且被一个相当基本的问题搞糊涂了。设置滑块时,我希望不使用主题。当我从左向右滑动时,滑块手柄的右手位置通过滑块逐步处理1个手柄宽度。这是由于滑块css用左手定位手柄:100%。我注意到很多其他人没有任何困难地使用滑块,但看不出他们如何解决这个问题。 Demo of issue 我认为我遗漏了一些令人尴尬的基本内容并且很想知道什么。 非常感谢

答案

在阅读了更多内容之后,似乎滑块被设计成以所描述的方式起作用,但是手柄向左偏移其宽度的50%。因此,条形的中心表示值 - 这是完全有意义的(当滑块表示值时)。 要将滑块用作滚动条,只需将滑块包裹在div中,该div左右填充滑块宽度的50%。我已经更新了my demo以反映这一点。 如果有人有更好的解决方案,而不需要额外的div,我希望看到它。

另一答案

我检查了你的演示。您缺少一些css文件。您还可以从jquery ui站点下载css文件。例如,ui-widget-content是css,它指定滑块的宽度及其在滑块中的缺失。获取一个CSS并将其链接到您的页面,你应该没问题。

另一答案

设置左边距或减去手柄宽度的一半

另一答案

它还有助于确保传递给滑块的值是整数。我有一些问题,滑块的指针在错误的地方,但当我强制使用parseInt()的值是整数时,如下所示:

value:parseInt(whateverValue)

它工作得很好。

另一答案

我发现css“translate”属性是这里的最佳选择......

.ui-slider-horizontal .ui-slider-handle {
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    transform: translateX(-2px);
}

根据您的需要调整转换像素值:)

以上是关于jquery-ui滑块手柄的最终位置是100% - 将它放在滑块外面的主要内容,如果未能解决你的问题,请参考以下文章

JQuery UI 范围滑块值

引导 4 升级后 jquery 滑块不显示

jQuery UI Slider - 手柄和滚动内容的动画不同步

如何限制 jQuery UI 滑块的范围?

单击滑块轨道时获取 Jquery-UI 滑块值?

带有 2 个手柄的 jQuery UI 滑块 - 防止交叉