Home » jQuery » jQuery – Using Slider as a Scrollbar

jQuery – Using Slider as a Scrollbar

misc_vol3_074 Last week I introduced the jQuery UI element known as a slider and indicated that this control could easily be used as a custom scrollbar.

Today I’m going to show you exactly how that’s done.

First we need to adjust our HTML.  We need to add a content area to the HTML we had last week.  I’m going to put this content area to the right of the scrollbar, but you could put it to the left by simply changing the CSS.

    <div id="slider"></div>
    <div id="scroller"><div id="content">
    here is lots of text<br />

The CSS to position this all correctly looks like this:

    height: 242px;
    width: 13px;
    margin:0px 10px 0px 10px;
    width: 1159px;
    height: 243px;
    width: 215px;

Not much exciting here.  Slider is basically the same as last week.  The area we want to scroll is composed of two elements, a div we’ve given the ID “content” that is nested inside another div we’ve named “scroller.”  The scroller is a fixed height and set so that if the content is longer than the scroller, it will not be displayed.

The rest is simple jQuery magic:

$(function() {
    { change: handleChange,
        slide: handleSlide,
        min: -100,
    max: 0 });

function handleChange(e, ui) {
    var maxScroll = $("#scroller")
      .attr("scrollHeight") -
      .animate({ scrollTop: -ui.value *
     (maxScroll / 100)
    }, 1000);


function handleSlide(e, ui) {
    var maxScroll = $("#scroller")
      .attr("scrollHeight") -
      .attr({ scrollTop: -ui.value
        * (maxScroll / 100)   });


At the top of our Javascript, we are simply wiring up our slider control.  The most notable thing you’ll want to pay attention to here is that I’ve set the minimum height and maximum height so that zero is at the top of the slider.  If you don’t do this, the slider will start with the thumb at the bottom.  Not exactly what we have in mind.

We need to wire up two event handlers, slide and change, so that the content area will scroll as we move the thumb.  We’ve done that in the document-ready function.

The two event handlers first determine the maximum scroll height and then position the content area within the scroller area.  Again, to make this work correctly, we needed to negate the value that was passed in in the ui parameter.

Obviously, it would not take a whole lot of work to package this all up as a plugin that does all the work for you, but it helps to know how to do it if you need to.


Other post in jQuery

Related Post

  • jQuery – Auto Scrolling the SliderjQuery – Auto Scrolling the Slider Question from Yuhsin: I would like to make the jquery steps slider to do auto-increment when the window loads. Is there an easy way to trigger the slide to move by itself ? I'm assuming […]
  • jQuery – Date PickerjQuery – Date Picker Today we’ll start taking a look at the final control in the jQuery UI suite.  The Date Picker. This control, as with all the other controls we’ve looked at, is relatively simple […]
  • jQuery Expand/Collapse Using Head TagsjQuery Expand/Collapse Using Head Tags I’ve spent a good chunk of the last two days working on an interesting project for one of my clients that I think the rest of the jQuery community could benefit from. The task started […]
  • jQuery – EventsjQuery – Events As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if […]
  • jQuery SplitterjQuery Splitter Hey!  This is pretty cool. I was just mentioning at the last jQuery presentation I did that there were some controls that were definitely missing from the jQuery UI suite of […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS. Does your team need additional help in any of the above? Contact Dave today.

One Pingback/Trackback