jQuery UI滑块和句柄修改

Question

我使用标准的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类不会在任何地方使用。

Answer 1

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

如果你没有看到萤火虫该类那么也许你没有使用这种类型的滑块

我想你问的是如何有手柄的左边缘停在“滑块通道”的左边缘和手柄的右边缘不会越过“滑块通道”的右边缘。即：坐在滑动通道中的手柄

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

例如：

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

然后包裹滑盖你的背景div容器内。容器div可以被看作是“slider-lane”，你可以给它所需的填充，所以句柄看起来会停留在slider-lane中。

例如：

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

手柄margin-left也重新回到这是什么，如果你有左，右的div容器，否则只是使用填充右侧填充。