Chris Nanney

Scrolling Content with jQueryUI Slider

February 4, 2011
This post is over 11 years old

In the world of web development, this is ancient. What you see here may no longer be a good idea or in alignment with best practices. I've left the content mostly as-is, besides minor fixes for typos or dead links.

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:

Scrolling content example.

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: