jQuery – Sliders (scrollbars to the rest of us)

ka_vol1_048 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:

image

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.

 

Other post in jQuery

Related Post

  • jQuery – Using Slider as a ScrollbarjQuery – Using Slider as a Scrollbar 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. ...
  • 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 this que...
  • jQuery TabsjQuery Tabs While the TabControl provided by Microsoft in the AJAX toolkit is probably a bit easier to use, the Tabs in jQuery are not much harder to implement and give us a bit more flexibility. Here are th...
  • jQuery ProgressbarjQuery Progressbar Once you venture into the land of AJAX you’ll soon discover the need to let your user know that some work is taking place in the background.  If you can, you’ll want to let them know just how...
  • jQuery – DialogjQuery – Dialog Ever since pop-up windows became “evil” in the web development world, developers have been looking for other ways to achieve the same effect.  The most common method is to use some sort of ab...