UI Slider to horizontally scroll a page?

UI Slider to horizontally scroll a page?

Hey. I'm using the UI slider to horizontally scroll the page at www.davenquinn.com/blog. Ideally, the slider would simply be mapped to the bottom scrollbar (which I plan on removing). However, I'm running into some problems. When I drag the slider to scroll the page, the page "zooms" to the other end much faster than I drag it. I'm not sure what's causing this problem. The slider and the main body of the page are centered using "position: fixed" in css, and the scrolling content occupies the full width of the actual page. The problem is reproducible online.

Any ideas? Thanks in advance.

Relevant jQuery:

  1.     function handleSliderChange(e, ui){
  2.         var maxScroll = $(document).width() - $(window).width();
  3.       $(window).animate({ scrollLeft: ui.value*maxScroll/100}, 800);
  4.       $('#bottom p').text("Max: " + maxScroll + ", UI value: " + ui.value + ", Page Scroll: " + $(window).scrollLeft());
  5.       }
  6.     function handleSliderSlide(e, ui) {
  7.         var maxScroll = $(document).width() - $(window).width();
  8.       $(window).scrollLeft( ui.value*maxScroll/100);
  9.       $('#bottom p').text("Max: " + maxScroll + ", UI value: " + ui.value + ", Page Scroll: " + $(window).scrollLeft());
  10.     }
  11.    
  12.     $("#slider").slider({
  13.          animate: true,
  14.          change: handleSliderChange,
  15.          slide: handleSliderSlide
  16.     });