Skip to main content

Search and Top Navigation

#4308 closed bug (wontfix)

Opened March 09, 2009 07:02PM UTC

Closed March 18, 2009 12:39PM UTC

Last modified October 11, 2012 09:15PM UTC

Handle goes outside of the body

Reported by: olegkikin Owned by:
Priority: blocker Milestone:
Component: ui.slider Version: 1.7
Keywords: slider Cc:
Blocked by: Blocking:

Quick bug demo:

New slider implementation doesn't take the width of the slider handle into account. As a result, the handle goes outside of the slider body.

Attachments (0)
Change History (3)

Changed March 09, 2009 07:02PM UTC by olegkikin comment:1

Code to reproduce the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	<title>Slider Test</title>
	<script type="text/javascript" src=""></script>
	<script type="text/javascript" src=""></script>
	<style type="text/css">
		#slider {width:300px; height:20px; background-color:#f0f}
		.ui-slider-handle {width: 50px; height: 15px; background-color:#0f0; position:relative; left:0px; cursor: e-resize; font-size: 9px; font-family: verdana;}
Slide all the way to the right<br/><br/>
<div id="slider">
	<div class='ui-slider-handle'>slide me</div>
<script type="text/javascript">
		value: 40

Changed March 18, 2009 12:39PM UTC by rdworth comment:2

resolution: → wontfix
status: newclosed

This is as designed. See

"Handles are now left-aligned at the value. To center-align them, give the handle a negative margin-left of handlewidth / 2. For example:

.ui-slider-handle { width: 12px; margin-left: -6px; }

For vertical slider handles, do the same with height and margin-bottom.


Another option is to have a sliding alignment. This (currently) has to be done manually. For an examples, see

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:3

milestone: TBD

Milestone TBD deleted