Customized slider handle snapping to cursor?

Question

I'm using a completely ordinary jQuery slider whose handle I narrowed using the following CSS:

html body .ui-slider .ui-slider-handle {
    width: 10px;
}

This has the desired effect of narrowing the slider handle, but it has the unwanted side effect of making the handle snap to a position just left of the cursor when I try to drag it.

What's causing this, and how can I modify the behavior?

http://jsfiddle.net/Z7pW3/1/ Grab the handle and slowly drag it, you'll see that while moving it will always be positioned a bit to the left of the cursor instead of staying where it was relative to the click. The code controlling the dragging needs to be alerted to the width change, but I don't know how to do that. — temporary_user_name, Mar 13 '13 at 19:10

score 1 · Accepted Answer · answered Mar 13 '13 at 19:16

1

This is because .ui-slider .ui-slider-handle uses margin-left in the CSS.

When you change the width, make sure to also change the margin-left.

.ui-slider .ui-slider-handle {
    width: 10px;
    margin-left: -.3em; /*change this*/
}

DEMO: http://jsfiddle.net/dirtyd77/Z7pW3/6/

answered Mar 13 '13 at 19:16

Dom

38,906
12
52
81

I'm not quite pro enough at CSS to understand why you chose em over px-- can you explain? – temporary_user_name Mar 13 '13 at 19:21
@Aerovistae no worries, this article helped me out: http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/ You will notice most jQueryUI CSS uses `em`. – Dom Mar 13 '13 at 19:22

Customized slider handle snapping to cursor?

1 Answers1