Random Thoughts

Here are five easy steps to add slider functionality to your web applications:

Step 1: Go to JQuery UI site and create a custom download. To keep things simple, select “No Theme”.under theme section and deselect all but UI Core and Slider checkboxes. Hit Download and unzip the downloaded file.

Step 2: Copy the jquery-1.3.2.min.js and “jquery-ui-1.7.2.custom.min.js” files into your project. These files should be under the js folder. Include the js files in your html/jsp page.

Step 3: Add the following styles to the page:

I am using the slider bar and slider handle images from YUI

Step 4: Add a DIV for the slider in the HTML.

Step 5: Initialize the slider in the document ready function:

That’s it. You can find a demo of this example here.