JQuery UI price slider

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<input id="lower_bound"/>
<div class="price-slider"></div>
<input id="upper_bound"/>

CSS

div.price-slider {
    margin: 10px 0;
}

JavaScript

var $slider = $('.price-slider'),
    $lower = $('#lower_bound'),
    $upper = $('#upper_bound'),
    min_rent = 40,
    max_rent = 500;

$lower.val(min_rent);
$upper.val(max_rent);

$('.price-slider').slider({
    orientation: 'horizontal',
    range: true,
    animate: 200,
    min: 0,
    max: 500,
    step: 1,
    value: 0,
    values: [min_rent, max_rent],
    slide: function(event,ui) {
        $lower.val(ui.values[0]);
        $upper.val(ui.values[1]);
    }
});

$lower.change(function () {
    var low = $lower.val(),
        high = $upper.val();
    low = Math.min(low, high);
    $lower.val(low);
    $slider.slider('values', 0, low);
});

$upper.change(function () {
    var low = $lower.val(),
        high = $upper.val();
    high = Math.max(low, high);
    $upper.val(high);
    $slider.slider('values', 1, high);
});