jQuery UI #7084 Draggable with parent containment and margin

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: 400px;
    border: 1px solid #000;
}

#bar {
    background: #999;
    height: 35px;
    cursor: pointer;
    width: 200px;
    margin: 20px;
}

JavaScript

$('#bar').resizable({
    containment: '#slider', 
    handles: "e,w",
    grid: [30, 1]
});

$('#bar').draggable({
    containment: '#slider', 
    handles: "e,w",
    
});