Home > Getting Started, JQuery, Solutions Log > Adding JQuery UI Slider

Adding JQuery UI Slider

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.

  1. No comments yet.
  1. October 9th, 2009 at 14:15 | #1
  2. July 18th, 2012 at 04:40 | #2