#4398 closed bug (notabug)

Opened March 24, 2009 01:43PM UTC

Closed May 15, 2009 01:50AM UTC

Slider handle not contained within slider

Reported by: mikael Owned by:
Priority: critical Milestone: 1.8
Component: ui.slider Version: 1.7.1
Keywords: width, handle, slider, contain, size, scrollbar, edge, height, restrict Cc:
Blocked by: Blocking:
Description

When the slider handle is larger than 10-15px it no longer remains with the width/height of the slider itself and instead can be moved outside of the sliders edges.

I have a slider that I would like to use a scrollbar, so the handle is set to 200px wide. I can actually slide the handle off the end of the slider - it is as if the slider widget now assumes a size of about 10px for the handle.

Attachments (0)
Change History (4)

Changed March 24, 2009 01:45PM UTC by mikael comment:1

I should add that this behaviour worked perfectly in the previous versions (the handle was properly constrained no matter how wide/tall it was).

Changed March 24, 2009 01:52PM UTC by mikael comment:2

Another thing - setting the left margin to a negative value so that the handle can be centered also positions it off the end of the slider, both at the start and end of it.

Changed May 07, 2009 01:38PM UTC by jzaefferer comment:3

milestone: 1.7.2 → 1.8

Changed May 15, 2009 01:50AM UTC by rdworth comment:4

resolution: → invalid
status: new → closed

This is as designed. The slider was redesigned in 1.7 (starting in 1.6rc3) so that the value of each handle is aligned with the center of the handle. So if the handle is at the slider's min, the left half of the handle will be beyond the left half of the slider. If the handle is at the slider's max, the right half of the handle will be beyond the right half of the slider. See

http://jqueryui.com/docs/Upgrade_Guide#Slider

What you're trying to do can be achieved with some effort, but there is no built-in support for it. You can see an example of it here:

http://jquery-ui.googlecode.com/svn/trunk/demos/slider/side-scroll.html

This is done by setting the margin-left variably (between 0 and handle-width) as the handle slides from slider min to slider max.