title: JQuery slider problems
body: <p>I am trying to implement JQ UIslider - but I keep running into problems, so I hope that someone can help.</p>
  
  <p>I am trying to do it without the JQUI image for the "slider" button. I can get so far but I cannot get it to work "properly".  My code is like this: </p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="scroll-pane" class="clearfix" &gt;
  &lt;div id="pagination" class="clearfix"&gt;&lt;/div&gt;
  &lt;div class="scroll-bar-wrap"&gt;
  &lt;div class="scroll-bar"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.scroll-bar { background-color:#00FFFF; width: 50px; height: 20px; }
  #pagination { width: 2440px; float: left; }
  #scroll-pane { overflow: auto; width: 99%; float:left; }
  .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; background: #FFCC00; width: 400px; }
  .scroll-bar-wrap .ui-slider { border:0; height: 2em; margin: 0 auto; background: #FF0000; width: 20px;}
  </code></pre>
  
  <p>and the JQ is like this: (BTW I don't understand any of it!)</p>
  
  <pre><code>$(document).ready(function() {
  
      var scrollPane = $( "#scroll-pane" ),
      scrollContent = $( "#pagination" );
      var scrollbar = $( ".scroll-bar" ).slider({
          slide: function( event, ui ) {
              if ( scrollContent.width() &gt; scrollPane.width() ) {
                  scrollContent.css( "margin-left", Math.round(
                      ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
                  ) + "px" );
              } else {
                  scrollContent.css( "margin-left", 0 );
              }
          }
      });
  
      //append icon to handle
      var handleHelper = scrollbar.find( ".ui-slider-handle" )
      .mousedown(function() {
          scrollbar.width( handleHelper.width() );
      })
      .mouseup(function() {
          scrollbar.width( "100%" );
      })
      .append( "&lt;span class='ui-icon ui-icon-grip-dotted-vertical'&gt;&lt;/span&gt;" )
      .wrap( "&lt;div class='ui-handle-helper-parent'&gt;&lt;/div&gt;" ).parent();
  
      //change overflow to hidden now that slider handles the scrolling
      scrollPane.css( "overflow", "hidden" );
  
      //size scrollbar and handle proportionally to scroll distance
      function sizeScrollbar() {
          var remainder = scrollContent.width() - scrollPane.width();
          var proportion = remainder / scrollContent.width();
          var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
          scrollbar.find( ".ui-slider-handle" ).css({
              width: handleSize,
              "margin-left": -handleSize / 2
          });
          handleHelper.width( "" ).width( scrollbar.width() - handleSize );
      }
  
      //reset slider value based on scroll content position
      function resetValue() {
          var remainder = scrollPane.width() - scrollContent.width();
          var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
              parseInt( scrollContent.css( "margin-left" ) );
          var percentage = Math.round( leftVal / remainder * 100 );
          scrollbar.slider( "value", percentage );
      }
  
      //if the slider is 100% and window gets larger, reveal content
      function reflowContent() {
              var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
              var gap = scrollPane.width() - showing;
              if ( gap &gt; 0 ) {
                  scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
              }
      }
  
      //change handle position on window resize
      $( window ).resize(function() {
          resetValue();
          sizeScrollbar();
          reflowContent();
      });
      //init scrollbar size
      setTimeout( sizeScrollbar, 10 );//safari wants a timeout
  });
  </code></pre>
  
  <p>The content for #pagination is "dynamically" generated.  The problem I have is that <code>.scroll-bar-wrap .ui-slider</code> doesn't slide (animate).  Just "touching it" moves the slide content too much and too quickly and it is very difficult to "get it back".</p>
  
  <p>All I need is a "simple slider situation" where #pagination moves left/right to show/hide page numbers as they are created.  Something tells me the JQUI code is "over complex" - I might be wrong - but so far this has taken up far far to much time on what should be a simple thing - OK granted I am not a JQ/JS type person but .. the JQUI example <a href="http://jqueryui.com/demos/slider/#side-scroll" rel="nofollow">link text</a> works fine and this is the code for it.  I just don't want the backgrounds/slider button as they have it.</p>