jquery + bootstrap slider in a dropdown

causes too many slider events

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="nav dropdown"> <a id="XYZ" data-toggle="dropdown" class="btn btn-primary" href="#"></a>
    <ul class="dropdown-menu">
        <li><a href="#">
                <p>Range: 0 to Inf</p>
                   <div id="slider-range"></div>
                </a>
        </li>
    </ul>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

JavaScript

islide = 0;
$("#XYZ").text("DDDDDxD");
$("#XYZ").append("<b class=caret></b>");
$("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [75, 300],
    slide: function (event, ui) {
        ++islide;
        $("#XYZ").html("$" + $(this).slider("values", 0) + " - $" + $(this).slider("values", 1) + " <b class=''></b>");


    }
});