Search jQuery

jQuery Forum

Using jQuery UI

Chan

How to make slider handle fit the track

Answered

Need more info
Working on it
Answered

in Using jQuery UI • 13 years ago

http://jqueryui.com/demos/slider/

jquery default slider's handle is "over" the track, in our experience, the handle box should be "fit" the track, I don't konw why jquery team want's to make it like this, and it's seem's no option to define it, but I really want to know how to do it.

Replies(7)

n3dst4

Re: How to make slider handle fit the track

13 years ago

You can do this with CSS:

.ui-slider-horizontal { height: 1em; }
.ui-slider .ui-slider-handle { height: 0.9em; }
.ui-slider-horizontal .ui-slider-handle { top: 0; }

Or thereabouts.

rdworth

Re: Re: How to make slider handle fit the track

13 years ago

Actually it takes a bit more than that. A slider handle by default is aligned with its center at the value. So at the min the left/bottom half of the handle is off the left/bottom of the track and at the max the right/top is off the right/top of the track. In order to keep it in the track (left/bottom-aligned at min, right/top-aligned at max) you have to dynamically adjust the negative margin from 0 to {width of handle} whereas the default is {width of handle / 2}. Demo here:

http://jqueryui.com/demos/slider/#side-scroll

n3dst4

Re: Re: How to make slider handle fit the track

13 years ago

Oh yeah. My bad.

Chan

回复: How to make slider handle fit the track

13 years ago

nope, I try it before, it's looks right, but the center point of the handle will be wrong.
you can slide and see.

n3dst4

Re: How to make slider handle fit the track

13 years ago

You can tweak it a bit more, but I'm pretty certain that's the right route. If the vertical center point is out, you just need to tweak the "top:" css property.

rdworth