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-slider-handle的margin-left设置为-20px。 但是在两端它重叠了它的通道。
有没有用ui-slider-range-max做点什么？ 但是当通过Firebug检查滑块时，这个CSS类不会在任何地方使用。
类ui-slider-range-max被赋予具有固定最大点的滑块的范围部分。 像这样：http://jqueryui.com/demos/slider/#rangemax
如果你没有在Firebug中看到那个类，那么也许你没有使用这种类型的滑块
我想你要问的是如何让手柄的左边缘停在“滑块通道”的左边缘，而手柄的右边缘不会越过“滑块通道”的右边缘。 即：坐在滑动车道上的手柄
如果是这样，您可以通过首先删除背景以及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中的左侧和右侧填充时的情况，否则只需使用右侧的填充。