related range sliders

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id="container">

    
    <div id="slider-range" style="width:600px"></div>
    <br /><br />

    
    <div id="slider-range2" style="width:600px"></div>
</div>

CSS

#container{margin:20px;}

JavaScript

$(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 1440,
            step: 5,
            values: [ 0, 0],
            stop: function(event, ui){
                var valuesOfSecond = $( "#slider-range2" ).slider("option", "values");
                var diff = valuesOfSecond[1] - valuesOfSecond[0];
                
                // This line changes min value (minimum border, not the slider on left)
                //$( "#slider-range2" ).slider("option", "min", ui.value);
                
                // This line changes the slider on left
                $( "#slider-range2" ).slider("option", "values", [ui.value, ui.value+diff]);
            }
            });
    $( "#slider-range2" ).slider({
            range: true,
            min: 0,
            max: 1440,
            step: 5,
            values: [ 0, 5 ]
            });
    });