Jquery UI Scroll Bar not fitting the contents

I am using Jquery UI Scroll Bar http://jqueryui.com/demos/slider/#side-scroll This is the link to my customized scroll bar http://providentfeed.com/beta/search.php. You can see at the bottom where I am using it for pagination. The problem is that scroll bar is starting from middle and don't move on to the start and when we move to right it shows a empty space a开发者_开发百科fter that means I am not able to move it up to corners. In Jquery default demo, it is perfect. Any idea please, to fix this problem?

Regards

I am inspect your page and think your problem is for CSS. div of class .scroll-bar and its child div which class is .ui-handle-helper-parent are not equal. If this two div have same width then it will work as you required. In this page the computed width of class .scroll-bar is 289px. You would try

$('.ui-handle-helper-parent').width('289px');

or

$('.ui-handle-helper-parent').width($('.scroll-bar').width());

If you have any border in .scroll-bar then actual width of this div is including right and left border.