A Brief Introduction

The jQuery UI is a fantastic set of controls that we can add to our applications to make them more dynamic. It can provide everything from a full-fledged calendar with date picking support, down to a simple slider. Today, we’ll see how to include one of the more common jQuery UI controls, and write a bit of JavaScript to get it working.

Step 1: The HTML

The important thing to note about the HTML page is the order in which we include our JavaScript files. We’ll be including jQuery as the topmost file, the jQuery UI next, and the JavaScript file we’ll be writing our code in directly after that. Here’s what the HTML should look like initially:

jQuery UI elements have their own CSS files and images associated with them. These files come with the jQuery UI when you download it from their homepage. The CSS file and the images in the downloadable folder, and as you can see, we’ve linked to a style sheet called “excitebike”. This directly correlates to the UI theme that I chose when I downloaded the copy of jQuery UI. If you’re using your own copy of the UI, be sure to check the name of the style sheet in the CSS folder that came with your download.

Part 2: The Slider

The UI gives us an infinite amount of possibility when creating our applications, and makes adding controls trivially simple. All we have to do is call out an object from our HTML page using jQuery, and then attach a function to it that turns it into the control we need. For example, let’s take a look at the slider control. A slider is a user interface element that is generally used to select between a range of numbers. You’ve probably noticed the sliders before in something like this:

The “fill light”, “highlights”, “shadows”, and “color temperature” controls are all slider controls. Each allows a user to select between a range of values. Let’s add a div to our page and give it an ID of “slider”. We’ll then go back into our JavaScript file to turn our div into an actual slider control. Here’s what the HTML should now look like:

Simple enough right? Well, believe it or not, turning our div into an actual slider control is probably even simpler.

Every jQuery UI control is made by calling special methods on HTML elements. When you call these methods, you can pass in options that are unique to each method. For instance, the slider method has options like step, min, and max whereas others may or may not have the same values. Let’s turn our “slider” div into a jQuery slider by calling the slider method with no options:

Voila! Presto! Ta-da! Whatever magic phrase you’d prefer to use here, just take note of the shear brilliance behind what just happened. We called out the “slider” div element on our page, and then we attached the slider() function to it. Now, if you have a look at the page in your browser, you’ll see a beautiful jQuery UI control (not-so-beautifully) stretched all the way across the page. We can still add simple CSS to change the width, but for our purposes, we’ll just keep it simple. Let’s take a look at some of the options for the slider control:

The min option is, as you can probably guess, the minimum value. Not surprising, the max option is the maximum value of the slider element. Think of the step option as telling JavaScript how many to count by. If we had set step to 10, it would count by 10′s, thereby leaving us with 10 “notches” in our slider. Since we chose 1 and the max value is 100, we have 100 “notches” in our slider.

In order to use the slider in a real world situation, we’ll need to know the value of the slider and apply it to an object. The value option is where we’ll get this information. Let’s set up a div that we can output the value of our slider to. Change the index.html file so that it looks like this:

The value div is where we’ll be outputting the value of the slider. We’ll need to take the value and inject it into the div using the .html() function that is provided by jQuery. Take a look at the following JavaScript code:

What we’ve done is added a new option to the slider called slide. This is essentially an event handler that allows us to call a function when the slider is , well, sliding. The function we’ve written above takes two arguments; event and ui. The ui argument refers to the ui element that’s calling the function, which in our case, is the slider. Therefore, when we pass ui.value into the html, we end up with the value of the slider inside of our “value” div. Have a look at our finished slider in the browser, and bask in the mighty glory of jQuery.

Download Source Files