jquery-ui 滑块句柄完成位置为 100% 左侧 - 将其放在滑块之外答案

【问题标题】：jquery-ui slider handle finish position is 100% left - placing it outside the sliderjquery-ui 滑块句柄完成位置为 100% 左侧 - 将其放在滑块之外
【发布时间】：2011-03-13 15:08:28
【问题描述】：

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

【问题讨论】：

标签： jquery-ui slider jquery-ui-slider

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

我希望在不使用主题 css 的情况下执行此操作，但您指出了正确的方向，谢谢 :)

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

值：parseInt(whateverValue)

效果很好。

【讨论】：

【解决方案5】：

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

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

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

【讨论】：