#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:

Description

Quick bug demo:

http://v.giantrealm.com/test_cases/slider-test/slider-test.htm

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" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Slider Test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></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;}
	</style>
</head>
<body>
Slide all the way to the right<br/><br/>
<div id="slider">
	<div class='ui-slider-handle'>slide me</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$('#slider').slider({
		min:0,
		max:100,
		step:10,
		value: 40
	});
});
</script>
</body>
</html>

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

resolution:	→ wontfix
status:	new → closed

This is as designed. See

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

"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

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

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

milestone:	TBD

Milestone TBD deleted