Opened 11 years ago

Closed 11 years ago

Last modified 7 years ago

#4308 closed bug (wontfix)

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.

Change History (3)

comment:1 Changed 11 years ago by olegkikin

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>

comment:2 Changed 11 years ago by rdworth

Resolution: wontfix
Status: newclosed

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

comment:3 Changed 7 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.