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 с левой стороны на -20px. Но затем на обоих концах он перекрывает свою полосу.

Это что-то сделать с ui-slider-range-max? Но при проверке слайдера через Firebug этот CSS-класс нигде не используется.

Answer 1

Класс ui-slider-range-max задан для части диапазона ползунка с фиксированной максимальной точкой. Как это: http://jqueryui.com/demos/slider/#rangemax

Если вы не видите этот класс в Firebug, то, возможно, вы не используете этот тип слайдера

Я думаю, что вы спрашиваете, как у левого края стоп РУЧКУ в на левый край «слайдер-полоса», а правый край ручки не проходит мимо правого края «ползунка». Т.е.: рукоятка, сидящая в полосе слайдера

Если это так, вы можете заставить ручку отображаться в пределах «ползунка», сначала удалив фон и все остальное, видимое из div слайдера ui.

пример:

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

Затем завернуть ползунок внутри контейнера DIV с фона. Контейнер-контейнер можно рассматривать как «ползунок-слайдер», и вы можете дать ему требуемую прокладку, чтобы ручка, казалось, оставалась в полосе слайдера.

пример:

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

также сбросить ручку margin-left обратно к тому, что это было, если у вас есть отступы слева и справа в контейнере DIV, в противном случае просто используйте отступы справа.