JQuery UI Slider Handle Goes out of Scroll Pane

JQuery UI Slider Handle Goes out of Scroll Pane

Hi,

I want to use a custom image for my vertical slider. My problem is that the scroll handle goes of the top edge of the scroll pane. I can get it to stay within the bottom by setting margin-bottom but it always goes off the top edge by what seems to be exactly the height of the scroll image. Any idea how to make it stay within the scroll pane?

Below is my setup:

        <style>
            .ui-slider-vertical .ui-state-default { 
                border: none;  
                width: 40px;
                height: 60px;
                background: url(img/slider-handle.png) no-repeat;            
            }
            .ui-slider-vertical .ui-slider-handle {
                height: 60px;
                margin-bottom: 0px;                
            }


        </style>
        <script>
            $(function() {
                $("#slider").slider({orientation: "vertical"});
            });
        </script>


                <div id="slider" style="width:20px; height:400px;">
                </div>