Configuring the Button

The jQuery UI button widget can be configured via settings properties, allowing control over the way that you create the button. Table 18-2 describes these properties.

These settings can be applied in two ways. The first is using a map object when calling the button method, as highlighted in Listing 18-2.

Listing 18-2.  Configuring the Button Widget Using a Map Object

...
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax("mydata.json", {
            success: function (data) {
                var tmplData = $("#flowerTmpl")
                    .template({ flowers: data }).filter("*");
                tmplData.slice(0, 3).appendTo("#row1");
                tmplData.slice(3).appendTo("#row2");
            }
        });
  
        $("button").button({
            label: "Place Your Order",
            disabled: true
        });
  
        $("button").button("option", "disabled", false);
    });
</script>
...

I have set the text that the button displays with the label property and used the disabled property to disable the button. Using a map object is the approach for defining the initial configuration for a widget and follows the style you saw most recently in Chapter 15 for configuring Ajax requests.

Listing 18-2 also shows the technique used to change the value for a settings property after the widget has been created, as follows:

...
$("button").button("option", "disabled", false);
...

I call the button method again, but with three arguments this time. The first argument is the string option and tells jQuery UI that I want to change a setting. The second argument is the setting I want to change and the third argument is the new value for the setting. This statement sets the disabled setting to false, enabling the button and changing the value I set with the map object when I created the widget.

You can combine these techniques so that you call the button method with a first argument of option and a map object as the second argument. This allows you to change multiple settings in one go, as shown in Listing 18-3.

Listing 18-3.  Using the Option Argument with a Map Object

...
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax("mydata.json", {
            success: function (data) {
                var tmplData = $("#flowerTmpl")
                    .template({ flowers: data }).filter("*");
                tmplData.slice(0, 3).appendTo("#row1");
                tmplData.slice(3).appendTo("#row2");
            }
        });
  
        $("button").button();
  
        $("button").button("option", {
            label: "Place Your Order",
            disabled: false
        });
  
        console.log("Disabled: " + $("button").button("option", "disabled"));
    });
</script>
...

You can use the same technique to read the value of a setting as well. In this case, you call the button method with just two arguments. The first is the string option and the second is the name of the setting whose value you want to read, as the following statement from the listing demonstrates:

...
console.log("Disabled: " + $("button").button("option", "disabled"));
...

When used this way, the button method returns the current setting value. The example statement reads the value of the disabled setting and writes it to the console, producing the following output:

Disabled: false

Using jQuery UI Icons in Buttons

The jQuery UI themes include a set of icons that you can use for any purpose, including displaying them in buttons. Listing 18-4 shows the use of icons in a jQuery UI button.

Listing 18-4.  Displaying an Icon in a Button

...
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax("mydata.json", {
            success: function (data) {
                var tmplData = $("#flowerTmpl")
                    .template({ flowers: data }).filter("*");
                tmplData.slice(0, 3).appendTo("#row1");
                tmplData.slice(3).appendTo("#row2");
            }
        });
  
        $("button").button({
            icons: {
                primary: "ui-icon-star",
                secondary: "ui-icon-circle-arrow-e"
            }
        });
    });
</script>
...

The icons property specifies which icons will be displayed. The button widget has two positions for icons. The primary icon is displayed to the left of the text and the secondary icon is displayed to the right of the text and both are specified with a map object. You can omit either property to display an icon in just one of the positions. The icons themselves are quite small, as you can see in Figure 18-2.

Icons are specified using classes that are defined in the jQuery UI CSS file. There are 173 different icons available, which is too many to list here. The easiest way to figure out the name of the icon you want is to go to http://jqueryui.com, select the Themes page and scroll down the page. You will see all of the icons listed in a grid, and moving the mouse button over each icon reveals the class name to use for the icon, as shown in Figure 18-3.

Using a Custom Image

I don’t find the jQuery UI icons all that useful because they are usually too small for my needs. Fortunately, there is a pair of alternate techniques to display a custom image in a jQuery UI button.

The first is to insert an img element inside the button element to which you intend to apply the jQuery UI button widget. The jQuery UI button widget respects the content of the underlying button element and—as long as you use an image with a transparent background—you don’t have to worry about making the image match the theme. Listing 18-5 gives a simple demonstration.

Listing 18-5.  Using a Custom Image with a jQuery UI Button

...
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax("mydata.json", {
            success: function (data) {
                var tmplData = $("#flowerTmpl")
                    .template({ flowers: data }).filter("*");
                tmplData.slice(0, 3).appendTo("#row1");
                tmplData.slice(3).appendTo("#row2");
            }
        });
  
        $("button")
            .text("")
            .append("<img src=rightarrows.png width=100 height=30 />")
            .button();
    });
</script>
...

Since I want neither text nor a jQuery UI icon, I use the jQuery text method to set the content to an empty string. I then use the append method to insert an img element into the button element and finally call the button method to apply jQuery UI. You can see the result in Figure 18-4.

Using the Button Methods

The jQuery UI widgets also define methods that you use to control the widget once it has been created. These methods are a little odd because you call the same JavaScript method but pass in different argument values to change the jQuery UI behavior. These are, however, still called methods by the jQuery UI team and I will refer to them as such. Table 18-3 shows the different jQuery UI methods you can use on the button widget and the effect each has.

...
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax("mydata.json", {
            success: function (data) {
                var tmplData = $("#flowerTmpl")
                    .template({ flowers: data }).filter("*");
                tmplData.slice(0, 3).appendTo("#row1");
                tmplData.slice(3).appendTo("#row2");
            }
        });
  
        $("button").button().click(function (e) {
            $("button").button("destroy");
            e.preventDefault();
        });
    });
</script>
...

...
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax("mydata.json", {
            success: function (data) {
                var tmplData = $("#flowerTmpl")
                    .template({ flowers: data }).filter("*");
                tmplData.slice(0, 3).appendTo("#row1");
                tmplData.slice(3).appendTo("#row2");
            }
        });
  
        $("<span>Enabled:<span><input type=checkbox checked />").prependTo("#buttonDiv");
        $(":checkbox").change(function (e) {
            $("button").button(
                $(":checked").length == 1 ? "enable" : "disable"
            )
        });
  
        $("button").button();
    });
</script>
...

...
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax("mydata.json", {
            success: function (data) {
                var tmplData = $("#flowerTmpl")
                    .template({ flowers: data }).filter("*");
                tmplData.slice(0, 3).appendTo("#row1");
                tmplData.slice(3).appendTo("#row2");
            }
        });
  
        $("<span>Enabled:<span><input type=checkbox checked />").prependTo("#buttonDiv");
        $(":checkbox").change(function (e) {
            var buttons = $("button");
            if ($(":checked").length == 1) {
                buttons.removeAttr("disabled");
            } else {
                buttons.attr("disabled", "disabled");
            }
            buttons.button("refresh");
        });
  
        $("button").button();
    });
</script>
...

Using the Button Event

The jQuery UI widgets define events in addition to those of the underlying HTML elements. The button widget defines a single event called create, which is triggered when you create a jQuery UI button widget. Handlers for jQuery UI events are defined by passing a JavaScript map object to the jQuery UI method for the widget, which is button in this case, as illustrated by Listing 18-9.

Listing 18-9.  Using the jQuery UI Button create Event

...
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax("mydata.json", {
            success: function (data) {
                var tmplData = $("#flowerTmpl")
                    .template({ flowers: data }).filter("*");
                tmplData.slice(0, 3).appendTo("#row1");
                tmplData.slice(3).appendTo("#row2");
            }
        });
  
        $("button").button({
            create: function (e) {
                $(e.target).click(function (e) {
                    alert("Button was pressed");
                    e.preventDefault();
                })
            }
        });
    });
</script>
...

In Listing 18-9, I use the create event to set up a function to respond to the click event on the button. I don’t find the create event useful and generally find that anything that can be done in response to this event can be done in a way that is more in keeping with the broader jQuery approach.

Creating a Toggle Button

If you call the button method on an input element whose type is set to checkbox, you get a toggle button widget. A toggle button is switched on or off when you click it, following the checked and unchecked states of the underlying HTML element. Listing 18-11 provides a demonstration.

Listing 18-11.  Applying jQuery UI to a Check Box

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(".jqButton").button();
        });
    </script>
</head>
<body>
    <form>
        <input class="jqButton" type="checkbox" id="toggle">
        <label for="toggle">Toggle Me</label>
    </form>
</body>
</html>

To create a jQuery UI button from a check box, you must have an input element and a matching label element, as shown in the listing. jQuery UI creates a button that has the same appearance as a basic button but that toggles its state when clicked. You can see the effect in Figure 18-8.

Remember that jQuery UI doesn’t change the underlying HTML element, so the check box is still treated the same way by the browser when included in forms. The change of state is reflected using the checked attribute, just as it would be without jQuery UI.

Creating a Button Set

You can use the buttonset method to create jQuery UI buttons from radio button elements, as shown in Listing 18-12.

Listing 18-12.  Creating a Button Set

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#radioDiv").buttonset();
        });
    </script>
</head>
<body>
    <form>
        <div id="radioDiv">
            <input type="radio" name="flower" id="rose" checked />
            <label for="rose">Rose</label>
            <input type="radio" name="flower" id="lily"/><label for="lily">Lily</label>
            <input type="radio" name="flower" id="iris"/><label for="iris">Iris</label>
        </div>
    </form>
</body>
</html>

Notice that I have selected the div element that contains the radio buttons in order to call the buttonset method: you don’t call the button method on the individual input elements. You can see the effect of the buttonset method in Figure 18-9.

At most, one of the buttons in the set can be selected, allowing you to provide the user with a fixed set of choices in a way that is visually consistent with other jQuery UI buttons. Notice that jQuery UI emphasizes the relationship between the buttons in a set by applying different styling to the edges where buttons meet. This is shown more clearly in Figure 18-10.

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#radioDiv").buttonset();
        });
    </script>
</head>
<body>
    <form>
        <div id="radioDiv">
            <input type="submit" value="Submit"/>
            <input type="reset" value="Reset"/>
            <input type="button" value="Press Me"/>
            <a href="http://apress.com">Visit Apress</a>
        </div>
    </form>
</body>
</html>

Creating the Progress Bar

You create a progress bar by selecting a div element and calling the progressbar method, as shown in Listing 18-14.

Listing 18-14.  Creating a Progress Bar

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#progressDiv").progressbar({
                value: 21
            });
        });
    </script>
</head>
<body>
    <div id="progressDiv"></div>
</body>
</html>

The document contains a div element with an id of progressDiv. To create a progress bar, I must use an empty div element–if the div element has any content, it will affect the layout of the progress bar. I use jQuery to select the progressDiv element and call the jQuery UI progressbar method, passing in a map object to provide the initial configuration. The progress bar supports three settings, which I have described in Table 18-4.

In the example, I specified an initial value of 21 (which will be equivalent to 21% since I have not changed the value of the max setting), and you can see the effect in Figure 18-12.

Creating an Indeterminate Progress Bar

As of jQuery UI 1.10, the jQuery UI progress bar widget supports displaying progress for indeterminate tasks, which is configured by setting the value configuration property to false rather than specifying a numeric value, as shown in Listing 18-15.

Listing 18-15.  Creating an Indeterminate Progress Bar

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#progressDiv").progressbar({
                value: false
            });
        });
    </script>
</head>
<body>
    <div id="progressDiv"></div>
</body>
</html>

jQuery UI displays an indeterminate progress with a simple animation applied to the entire bar. You need to run the example to see the effect of the animation, but Figure 18-13 shows one frame.

Using the Progress Bar Methods

The progress bar widget defines a number of methods, which are in the same style as for the button. In other words, you call the JavaScript progressbar method, and the first argument specifies the jQuery UI widget method you want. Table 18-5 describes the available methods.

Most of these methods work in the same way as for the button widget, so I am not going to demonstrate them again. The exception is the value method, which lets you get and set the value that is displayed by the progress bar and switch between the determinate and indeterminate states. Listing 18-16 demonstrates the use of the value method.

Listing 18-16.  Using the Progress Bar Value Method

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
     <script type="text/javascript">
         $(document).ready(function () {
  
             $("#progressDiv").progressbar({
                 value: 21
             });
  
             $("button").click(function (e) {
                 var divElem = $("#progressDiv");
                 if (this.id == "mode") {
                     divElem.progressbar("value", false);
                 } else {
                     var currentProgress = divElem.progressbar("value");
                     if (!currentProgress) {
                         divElem.progressbar("value", 21);
                     } else {
                         divElem.progressbar("value",
                             this.id == "decr" ? currentProgress - 10 :
                                                     currentProgress + 10)
                     }
                 }
             });
         });
    </script>
</head>
<body>
    <div id="progressDiv"></div>
    <button id="decr">Decrease</button>
    <button id="incr">Increase</button>
    <button id="mode">Indeterminate</button>
</body>
</html>

I have added button elements to this example. I use them to increase or decrease the value displayed by the progress bar and switch between the determinate and indeterminate modes. Each press of the Decrease or Increase button changes the value by 10% as shown in Figure 18-14.

The Indeterminate button calls the value method to switch the progress bar to its intermediate mode. Clicking either of the other buttons will set a numeric value, which will put the progress bar back to its determinate mode, as shown in Figure 18-15.

Using the Progress Bar Events

The jQuery UI progress bar widget defines three events, as described in Table 18-6.

Listing 18-17 shows the events in use.

Listing 18-17.  Using the Progress Bar Events

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
     <script type="text/javascript">
         $(document).ready(function () {
  
             $("button").button();
  
             $("#progressDiv").progressbar({
                 value: 21,
                 create: function (e) {
                     $("#progVal").text($("#progressDiv").progressbar("value"));
                 },
                 complete: function (e) {
                     $("#incr").button("disable")
                 },
                 change: function (e) {
                     var currentValue = $("#progressDiv").progressbar("value");
                     if (!currentValue) {
                         $("#progWrapper").hide();
                     } else {
                         if ($(this).progressbar("value") < 100) {
                             $("#incr").button("enable")
                         }
                         $("#progVal").text(currentValue);
                         $("#progWrapper").show();
                     }
                 }
             });
  
             $("button").click(function (e) {
                 var divElem = $("#progressDiv");
                 if (this.id == "mode") {
                     divElem.progressbar("value", false);
                 } else {
                     var currentProgress = divElem.progressbar("value");
                     if (!currentProgress) {
                         divElem.progressbar("value", 21);
                     } else {
                         divElem.progressbar("value",
                             this.id == "decr" ? currentProgress - 10 :
                                                     currentProgress + 10)
                     }
                 }
             });
         });
    </script>
</head>
<body>
    <div id="progressDiv"></div>
    <button id="decr">Decrease</button>
    <button id="incr">Increase</button>
    <button id="mode">Indeterminate</button>
    <span id="progWrapper">Progress: <span id="progVal"></span>%</span>
</body>
</html>

In Listing 18-17, I use span elements to display the numeric progress value while the progress bar is in the determinate mode. I use the create event to display the initial value, which is set using the value configuration property.

I use the complete event to disable the Increase button when the progress reaches 100% and the change event to ensure that the button is enabled for other values, to display the current value and to switch between the determinate and indeterminate modes. You can see the effect in Figure 18-16.

Configuring the Slider

A with all jQuery UI widgets, the slider widget defines a number of settings that you can use to configure the appearance and behavior of sliders. Table 18-7 describes these settings, and I show you how to use these settings to configure the widget in the sections that follow.

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <style>
        #hslider, #vslider { margin: 10px}
    </style>
     <script type="text/javascript">
         $(document).ready(function () {
             $("#hslider").slider({
                 value: 35
             });
  
             $("#vslider").slider({
                 orientation: "vertical",
                 value: 35
             });
         });
    </script>
</head>
<body>
    <div id="hslider"></div>
    <div id="vslider"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <style>
        #hslider, #vslider { margin: 10px}
    </style>
     <script type="text/javascript">
         $(document).ready(function () {
             $("#hslider, #vslider").slider({
                 value: 35,
                 orientation: "vertical"
             }).filter("#hslider").slider("option", "orientation", "horizontal");
         });
    </script>
</head>
<body>
    <div id="hslider"></div>
    <div id="vslider"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-1.7.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.16.custom.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.16.custom.css"/>
    <style type="text/css">
        #slider {margin: 10px}
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#slider").slider({
                animate: "fast"
            });
        });
    </script>
</head>
<body>
    <div id="slider"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <style>
        #slider {margin: 20px}
    </style>
     <script type="text/javascript">
         $(document).ready(function () {
             $("#slider").slider({
                 values: [35, 65],
                 range: true,
                 create: displaySliderValues,
                 slide: displaySliderValues
             });
  
             function displaySliderValues() {
                 $("#lower").text($("#slider").slider("values", 0));
                 $("#upper").text($("#slider").slider("values", 1));
             }
         });
    </script>
</head>
<body>
    <div id="slider"></div>
    <div>Lower Value: <span id="lower">
    </span> Upper Value: <span id="upper"></span></div>
</body>
</html>

...
$("#slider").slider("values", 0);
...

Using the Slider Methods

The slider defines the same set of basic methods that all jQuery UI widgets define, plus a couple that let you set either a single value or the range of values to be shown. Table 18-8 describes the methods.

Listing 18-23 shows how you can use the value and values methods to control a slider programmatically.

Listing 18-23.  Controlling Sliders Programmatically

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <style>
        #slider, #rangeslider, *.inputDiv { margin: 10px}
        label {width: 80px; display: inline-block; margin: 4px}
    </style>
     <script type="text/javascript">
         $(document).ready(function () {
  
             $("#slider").slider({
                 value: 50,
                 create: function () {
                     $("#slideVal").val($("#slider").slider("value"));
                 }
             });
  
             $("#rangeslider").slider({
                 values: [35, 65],
                 range: true,
                 create: function () {
                     $("#rangeMin").val($("#rangeslider").slider("values", 0));
                     $("#rangeMax").val($("#rangeslider").slider("values", 1));
                 }
             })
  
             $("input").change(function (e) {
                 switch (this.id) {
                     case "rangeMin":
                     case "rangeMax":
                         var index = (this.id == "rangeMax") ? 1 : 0;
                         $("#rangeslider").slider("values", index, $(this).val())
                         break;
                     case "slideVal":
                         $("#slider").slider("value", $(this).val())
                         break;
                 }
             })
         });
    </script>
</head>
<body>
    <div id="rangeslider"></div>
    <div class="inputDiv">
        <label for="rangeMin">Range Min: </label><input id="rangeMin" />
        <label for="rangeMax">Range Max: </label><input id="rangeMax" />
    </div>
    <div id="slider"></div>
    <div class="inputDiv">
        <label for="slideVal">Slide Val: </label><input id="slideVal" />
    </div>
</body>
</html>

This document contains two sliders and three input elements that allow the values for the handles to be specified without moving the handles themselves. You can see the layout of the elements in Figure 18-21.

I used jQuery to select the input elements and called the change method to set up a handler for the change event, meaning that the function is invoked whenever the value of one of the input elements is changed.

Within the handler function, I use the id attribute of the element that triggered the event to figure out which slider I need to manipulate and call the value or values methods to set the handle positions. The relationship between the input elements and the sliders is one-way, meaning that moving the handles doesn’t update the input elements. I’ll show you how to create a two-way relationship in the next section.

Using Slider Events

Table 18-9 shows the events that the slider supports. The best feature of these events is the support for both change and stop, which allows you to differentiate between new values created by the user moving the handle and values that you set programmatically.

Listing 18-24 shows the use of slider events to create a two-way (bidirectional) relationship between sliders and input elements, similar to the example in the previous section, albeit I have removed one of the sliders to keep the example simple. The two-way relationship allows me to tie together programmatic support and user interaction to manage the sliders.

Listing 18-24.  Using Slider Events to Create a Bidirectional Relationship Between Sliders and Inputs

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-2.0.2.js"></script>
    <script src="jquery-ui-1.10.3.custom.js"></script>
    <link href="jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <style>
        #rangeslider, *.inputDiv { margin: 10px}
        label {width: 80px; display: inline-block; margin: 4px}
    </style>
     <script type="text/javascript">
         $(document).ready(function () {
             $("#rangeslider").slider({
                 values: [35, 65],
                 range: true,
                 create: setInputsFromSlider,
                 slide: setInputsFromSlider,
                 stop: setInputsFromSlider
             });
  
             function setInputsFromSlider() {
                 $("#rangeMin").val($("#rangeslider").slider("values", 0));
                 $("#rangeMax").val($("#rangeslider").slider("values", 1));
             }
  
             $("input").change(function (e) {
                 var index = (this.id == "rangeMax") ? 1 : 0;
                 $("#rangeslider").slider("values", index, $(this).val())
             });
         });
    </script>
</head>
<body>
    <div id="rangeslider"></div>
    <div class="inputDiv">
        <label for="rangeMin">Range Min: </label><input id="rangeMin" />
        <label for="rangeMax">Range Max: </label><input id="rangeMax" />
    </div>
</body>
</html>

I handle the create, slide, and stop events in this example. Now the slider handles are moved when new values are entered into the input elements, and the values in the input elements are updated when the slider is moved. You can see how the document appears in Figure 18-22, but this is an example that requires interaction to see the full effect.