2

我第一次使用 jQuery-ui 滑块，对一个相当基本的问题感到困惑。设置滑块时，我希望不使用主题。当我从左向右滑动时，滑块手柄的右侧位置跨过滑块 1 个手柄宽度。这是由于滑块 css 将手柄定位在左侧：100%。我注意到许多其他人毫无困难地使用滑块，但看不出他们是如何解决这个问题的。
问题演示
我假设我错过了一些令人尴尬的基本内容，并且很想知道是什么。
非常感谢

4

5 回答 5

2

对此进行了更多阅读后，似乎滑块的设计方式与描述的方式相同，但手柄向左偏移了其宽度的 50%。因此，条的中心表示值 - 这完全有意义（当滑块表示一个值时）。
要将滑块用作滚动条，只需将滑块包裹在一个 div 中，该 div 左右填充为滑块宽度的 50%。我已经更新了我的演示以反映这一点。
如果有人有更好的解决方案，而不需要额外的 div，我想看看。

于 2011-03-13T17:59:54.410 回答
0

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

于 2011-03-29T22:44:57.657 回答
0

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

于 2011-03-13T16:04:15.830 回答
0

它还有助于确保传递给滑块的值是整数。我在滑块的指针位置错误时遇到了一些问题，但是当我使用 parseInt() 将值强制为整数时，如下所示：

值：parseInt(whateverValue)

它工作得很好。

于 2011-09-07T10:37:27.183 回答
0

我发现这里的 css“翻译”属性是最好的选择......

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

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

于 2018-03-06T10:07:11.067 回答