Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

它还有助于确保传递给滑块的值是整数。我有一些问题，滑块的指针在错误的位置，但当我强制该值为整数与parseInt（），如下所示：

value：parseInt（whateverValue）

它运作良好。

Answer 5

我发现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％ - 将它放在滑块外面

5 个答案: