jQuery Mobile 滑块句柄在一端移过轨道答案

【问题标题】：jQuery Mobile slider handle moves past track at one endjQuery Mobile 滑块句柄在一端移过轨道
【发布时间】：2014-04-24 21:30:29
【问题描述】：

所以我遇到的问题是，当我将滑块手柄移动到最小值（最左侧）时，它似乎超出了轨道的限制。您可以在下面看到我在说什么，因为第一个滑块的手柄仍在轨道内，但第二个滑块的手柄似乎超出了几个像素。

我将如何在这里偏移手柄？或者有什么我可以改变轨道来解决这个问题的吗？

谢谢！

【问题讨论】：

您没有任何代码可以作为我们的答案吗？

标签： javascript jquery css html jquery-mobile

【解决方案1】：

您似乎已通过 CSS 更改了轨道和手柄的大小。更改手柄大小时，需要将负左边距更改为手柄宽度的一半。此外，稍微减小轨道的边界半径将有助于视觉效果：

.ui-slider-track, .ui-slider-switch {
    height: 30px;
    border-radius: 12px;
}
.ui-slider-track .ui-btn.ui-slider-handle {
    width: 16px;
    height: 36px;
    margin-top: -20px  !important;
    margin-left: -8px !important;
}

DEMO

【讨论】：

【解决方案2】：

您可以在 CSS 中进行调整。打开开发工具并在滑块句柄元素上使用 padding-left margin。

不理想，但我过去曾做过类似的事情。

【讨论】：