How to limit scrolling of handle

How to limit scrolling of handle


Hello,
I would like to limit how far the handle scrolls left and right. I am
able to set a negative margin-left value which limits the right hand
side but I am running into problems with left hand side. Setting the
value option in the slider can set the handle up initially to where I
want it but it can still be moved farther to the left than I want.
What am I missing??
Thanks!
David
.ui-slider-horizontal .ui-slider-handle { width: 12px; margin-left:
-25px; }
<script type="text/javascript">
$(document).ready(function(){
$("#content-slider").slider({
value : 10,
    min: 0,
    animate: true,
change: handleSliderChange,
slide: handleSliderSlide
});
});
function handleSliderChange(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollWidth") - $
("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll /
100) }, 1000);
}
function handleSliderSlide(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollWidth") - $
("#content-scroll").width();
$("#content-scroll").attr({scrollLeft: ui.value * (maxScroll /
100) });
}
</script>
<div id="content-slider">
    <div class="ui-slider-handle"></div>
</div>