jQuery UI 滑块和句柄修改答案

【问题标题】：jQuery UI Slider and handle-modificationjQuery UI 滑块和句柄修改
【发布时间】：2011-04-12 01:21:11
【问题描述】：

我使用标准的 jQueryUI 滑块并想更改手柄的外观。我将 CSS 更改为

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 40px; height: 10px; cursor: default; border: 0; background-color: #c6c7c8; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: 10px; border: 0; background-color: #eceded;  }
.ui-slider-horizontal .ui-slider-handle { top: 0; margin-left: 0; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

我这样做是为了让手柄位于“滑行道”中。但如果把手移到最右边的位置，它就位于车道之外。当然我可以将.ui-slider-handle的margin-left设置为-20px。但随后在两端与车道重叠。

它与ui-slider-range-max 有关系吗？但是当通过 Firebug 检查滑块时，这个 CSS-class 并没有在任何地方使用。

【问题讨论】：

标签： jquery css jquery-ui slider handle

【解决方案1】：

ui-slider-range-max 类被赋予具有固定最大点的滑块的范围部分。像这样：http://jqueryui.com/demos/slider/#rangemax

如果您在 Firebug 中没有看到该类，那么您可能没有使用该类型的滑块

我认为您要问的是如何使手柄的左边缘停止在“滑道”的左边缘，并且手柄的右边缘不超过“滑道”的右边缘。即：位于滑块通道中的句柄

如果是这样，您可以通过首先删除背景和从 ui 滑块 div 中可见的任何其他内容来使手柄看起来停留在“滑块通道”内。

示例：

.ui-slider-horizontal { height: 10px; border: 0; background: none  }

然后将滑块包裹在带有背景的容器 div 中。容器 div 可以被视为“滑块通道”，您可以为其提供所需的填充，以便手柄似乎留在滑块通道内。

示例：

.ui-slider-container { background-color: #eceded; padding: 0 0.6em;}

如果您在容器 div 的左右两侧都有填充，也将句柄 margin-left 重置为原来的样子，否则只需使用右侧的填充。

【讨论】：