jQuery UI #7084 Draggable with parent containment and margin
http://bugs.jqueryui.com/ticket/7084
HTML
<script src="http://code.jquery.com/jquery-1.5.2rc1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>-->
<div id="slider">
<div id="bar"></div>
</div>
CSS
#slider {
width: 300px;
height: 100px;
border: 1px solid red;
margin-left: 20px;
}
#bar {
background: #999;
height: 5px;
cursor: pointer;
width: 5px;
}
JavaScript
$('#bar').draggable({
axis: "x",
containment: 'parent'
});