Scrolling Content with jQueryUI Slider

My first step when thinking of ways to create scrollable content was a Google search that lead me to a (now dead) post outlining how to use jQueryUI Slider to scroll a div. This solution required altering the jQueryUI source, which I felt was unnecessary, so I came up with a simple solution.

Slider interactions

There are two different interactions with the slider: clicking anywhere on the slider, and dragging the slide head. When clicking on the slider you want the slide head and content to smoothly animate to the clicked position. When dragging, you want the content to match the slide head position 1:1. Here's an example of both:

Simple setup

The HTML is very simple. Inside a parent container is the scroll content and the slider, and the content is an unordered list:

 1<div class="scroll-container">
 2  <div class="scroll-content">
 3    <ul>
 4      <li>1</li>
 5      <li>2</li>
 6      <li>3</li>
 7      <li>4</li>
 8      <li>5</li>
 9      <li>6</li>
10      <li>7</li>
11      <li>8</li>
12    </ul>
13  </div>
14  <div class="scroll-slider"></div>
15</div>

The JavaScript for the slider:

 1// Variable to hold scroll type
 2var slideDrag,
 3// Width of .scroll-content ul
 4slideWidth = 330,
 5// Speed of animation in ms
 6slideSpeed = 400
 7 
 8// Initialize sliders
 9$('.scroll-slider').slider({
10    animate: slideSpeed,
11    start: checkType,
12    slide: doSlide,
13    max: slideWidth,
14})
15 
16function checkType(e) {
17    slideDrag = $(e.originalEvent.target).hasClass('ui-slider-handle')
18}
19 
20function doSlide(e, ui) {
21    var target = $(e.target).prev('.scroll-content'),
22        // If sliders were above the content instead of below, we'd use:
23        // target = $(e.target).next(".scroll-content")
24        maxScroll = target.attr('scrollWidth') - target.width()
25    // Was it a click or drag?
26    if (slideDrag == true) {
27        // User dragged slider head, match position
28        target.attr({scrollLeft: ui.value * (maxScroll / slideWidth)})
29    } else {
30        // User clicked on slider itself, animate to position
31        target.stop().animate({
32            scrollLeft: ui.value * (maxScroll / slideWidth),
33        }, slideSpeed)
34    }
35}

When the slider is clicked, the function checkType() is executed, which determines if the handle or the slider was clicked. This determines which type of animation to do.

The other benefit of setting the code up like this is that I can have multiple sliders on the page that are all controlled with this single function. The piece that makes that possible is var target = $(e.target).prev(".scroll-content"), which says we're going to animate the content directly above the active slider in the DOM.

Scrollable content demo

The demo has six scrollable content divs, all controlled by the JavaScript above: