Opened 14 years ago

Closed 14 years ago

Last modified 10 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:


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.

Change History (3)

comment:1 Changed 14 years ago by olegkikin

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

comment:2 Changed 14 years ago by rdworth

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

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

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.