<link href="{tpl_url}/css/coveringBad.css" type="text/css"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css"/>
<script src="{tpl_url}/js/coveringBad.js" ></script>

 <div class="covered">
	<div class="handle"></div>
	<div class="changeable"></div>
</div>

 <script type="text/javascript">$(function() {
	$('.covered').coveringBad();
});</script>

  marginY : 20,   // Handle's distance from top and bottom
    marginX : 20,   // Handle's distance from left and right
    setX    : 30,   // Defulat location for handle from left
    setY    : 150,  // Defulat location for handle from top
    direction : "horizontal" // would be horizontal/vertical

 <div class="covered first">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>
<div class="covered second">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>
<div class="covered third">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>

 $(function() {
    $('.first').coveringBad();
    $('.second').coveringBad();
    $('.third').coveringBad({
        marginY : 20 ,
        marginX : 400 ,
        setX  : 400,
        setY  : 235 ,
        direction   : "vertical"
    });
});