title: Multiple jQuery UI Sliders on one page
body: <p>I'm having a real difficult time implementing multiple jQuery UI sliders on the same page. Everytime I move any of the sliders, the content items from all sliders slide instead of just the one positioned below the items I want to slide.</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;!--Box 1--&gt;
  &lt;div class="scroll-pane"&gt;
  &lt;div class="scroll-content"&gt;
    &lt;ul&gt;
    &lt;li&gt;Item One&lt;/li&gt;
    &lt;li&gt;Item Two&lt;/li&gt;
    &lt;li&gt;Item Three&lt;/li&gt;
    &lt;div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"&gt;
    &lt;div class="scroll-bar"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--Box 2--&gt;
  &lt;div class="scroll-pane"&gt;
  &lt;div class="scroll-content"&gt;
  &lt;ul&gt;
    &lt;li&gt;Item One&lt;/li&gt;
    &lt;li&gt;Item Two&lt;/li&gt;
    &lt;li&gt;Item Three&lt;/li&gt;
    &lt;div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"&gt;
    &lt;div class="scroll-bar"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my javscript:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      //scrollpane parts
      var scrollPane = $( ".scroll-pane"),
          scrollContent = $(".scroll-content");
  
      //build slider
      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
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I could really use somebody's help figuring out how to just have one of the items scroll and not both.</p>
  
  <p>Thanks</p>