jQuery UI Slider and handle-modification

Question

I use the standard jQueryUI slider and want to change the appearance of the handle. I changed the CSS to

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

I did so, to have the handle sitting in the "slider-lane". But if the handle is moved to the position far right, it sits just outside its lane. Of course I could set .ui-slider-handle's margin-left to -20px. But then on both ends it overlaps its lane.

Has it to do something with ui-slider-range-max? But when inspecting the slider via Firebug, this CSS-class is not used anywhere.

Answer 1

The class ui-slider-range-max is given to the range part of a slider with a fixed max point. Like this: http://jqueryui.com/demos/slider/#rangemax

If you don't see that class in Firebug then perhaps you're not using that type of slider

I think what you are asking is how to have the handle's left edge stop at the left edge of the "slider-lane" and the right edge of the handle not go past the right edge of the "slider-lane". Ie: the handle sitting in the slider-lane

If this is so, you could make the handle appear to stay within the "slider-lane" by first removing the background and anything else visible from the ui slider div.

example:

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

Then wrap the slider inside a container div with your background. The container div can be viewed as the "slider-lane" and you can give it the required padding so the handle will seem to stay within the slider-lane.

example:

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

also reset the handle margin-left back to what it was if you have padding on left and right in the container div, otherwise just use padding on the right.