Ticket #4398 (closed bug: notabug)

Opened 6 years ago

Last modified 5 years ago

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:
Blocking: Blocked by:

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.

Change History

comment:1 Changed 6 years ago by mikael

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

comment:2 Changed 6 years ago by mikael

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.

comment:3 Changed 5 years ago by joern.zaefferer

  • Milestone changed from 1.7.2 to 1.8

comment:4 Changed 5 years ago by rdworth

  • Status changed from new to closed
  • Resolution set to invalid

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.

Note: See TracTickets for help on using tickets.