.NET Answers

Scrollbars are a fundamental GUI widget that exist on every operating system.  With the browser continually morphing into it’s own operating system it isn’t surprising that there are several implementations of scrollbars available to us.  But, none make the concept of a scrollbar as flexible and as easy to use as the ones available to us from the jQuery UI library.  Not only can we use these for scrollbars but we can also use them for other scrollbar like widgets simply by restyling them.

To place a slider on the screen, this is the basic HTML you’ll need:

    <div id="slider"></div>

You will then need to style the div to get the width and height correct.  For this demo, I’m styling it to be a vertical slider:

#slider
{
    height: 242px;
    width: 13px;
    margin:10px;
}

Our basic javascript that turns this into a scrollbar is:

$(function() {
    $("#slider").slider();
});

And, just like we needed to do with the resizing code, we will need to import the theme we want to use.  See the article on resizing for the details on that.
http://blog.dmbcllc.com/2009/02/18/jquery-ui-resizable-w-aspnet-themes/

Which gives us a scrollbar that looks like this:

There are several properties and events that we can hook into to control how many units the slider represents and the range of units.  This allows the slider to represent positive and negative numbers.  You can also force the orientation, but the jQuery code is pretty good about guessing it for you.  If I had made the div wider than it was high, I would have rendered a horizontal slider.

If you’ve ever coded a scrollbar in windows, you’ll notice that the events we have been provided in jQuery are very similar to the events that are supplied in windows.  This makes sense because any slider would need to tell us when it started, when it ended, if it is currently sliding and when it stops.  We can use these events to update information in our user interface.  For example, it would not take a lot of work to have this scroll bar work in conjunction with another div to provide a custom scrolling effect.  Something I plan to address in a future post.

Related Post

• jQuery 1.4 Released
• Do you Need My Help?
• jQuery Expand/Collapse Using Head Tags
• Does jQuery Make Us Lazy?
• jQuery – Dialog

2 Responses to “jQuery – Sliders (scrollbars to the rest of us)”