Search code examples
jquerycssjquery-uijquery-slider

Customized slider handle snapping to cursor?

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?

Solution

  • 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/