jQuery UI滑块和句柄修改

我使用标准的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滑块句柄的边距设置为-20px。但它的两端都与车道重叠

它是否与
ui滑块范围max
有关？但是，当通过Firebug检查滑块时，该CSS类不会在任何地方使用。
类
ui滑块范围max
将指定给具有固定最大点的滑块范围部分。像这样：

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

我想你要问的是，如何让手柄的左边缘停在“滑块车道”的左边缘，而手柄的右边缘不超过“滑块车道”的右边缘。Ie：把手放在滑道上

如果是这样的话，您可以通过首先移除背景和从ui slider div中可见的任何其他内容，使句柄看起来保持在“slider lane”内

例如：

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

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

然后将滑块与背景一起包装在容器div中。container div可以被视为“slider lane”，您可以为其提供所需的填充，使句柄看起来保持在slider lane内

例如：

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

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

如果container div中的左边和右边都有padding，请将句柄
margin left
重置为原来的状态，否则只需使用右边的padding即可