Geek Answers Handbook

JQuery UI Slider and manual modification

I use the standard jQueryUI slider and want to change the appearance of the descriptor. I changed 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 made the pen sit in the slider. But if the handle moves to a position far to the right, it is right behind its strip. Of course, I could set .ui-slider-handle margin-left -20px. But then at both ends it overlaps its lane.

Something to do with ui-slider-range-max ? But when checking the slider through Firebug, this CSS class is not used anywhere.

+7
jquery css jquery-ui slider handle
source share
1 answer

The ui-slider-range-max class is defined by the fixed-point slider range part of the range. For example: http://jqueryui.com/demos/slider/#rangemax

If you do not see this class in Firebug, perhaps you are not using this type of slider

I think that you are asking how to leave the left edge of the left handle on the left edge of the “slider”, and the right edge of the handle will not go past the right edge of the “slider”. That is: the handle sitting on the slider

If so, you can force the descriptor to remain within the slider bar by first deleting the background and everything else visible from the div slider u.

Example:

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

Then wrap the slider inside the div container with your background. A container container can be thought of as a “slider strip,” and you can give it the required filling so that the handle appears to remain in the slider strip.

Example:

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

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

+4
source share

More articles:


All Articles