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

Posted 2021-03-31

我是第一次使用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);
}

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