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的边距设置为-20px。但后来两端都重叠了它。

是否可以对ui-slider-range-max执行某些操作？但是当通过Firebug检查滑块时，这个CSS类不会在任何地方使用。

Answer 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;}

还将句柄margin-left重置回容器div中左右填充的情况，否则只需使用右边的填充。

jQuery UI Slider和句柄修改

1 个答案: