CODEWITHSUNDEEP
jquerycssjquery-uijquery-slider
temporary_user_name
temporary_user_name

Reputation: 37058

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?

Upvotes: 1

Views: 742

Answers (1)

Dom
Dom

Reputation: 40459

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/

Upvotes: 1

Related Questions