Examples of Using Sliders

Let’s put our knowledge of sliders to use with some basic examples. In this section, we’ll write script that creates and manages one or multiple sliders.

Displaying the Value of One Indicator

Let’s start with a single indicator that displays the value when start, stop, slide, and change events occur.

We first get the value of the indicator at each event, then we display it in the field for the event. This allows us to see when each event is triggered by jQuery UI:

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<h3> Slider </h3>
<div id=slider></div><br />
Start : <span id=valuestart></span><br />
Stop : <span id=valuestop></span><br />
Change : <span id=valuechange></span><br />
Slide : <span id=valueslide></span>

<script>

$("div#slider").slider ({
  animate : true,
  start : function (event)
  {
    var value = $("div#slider").slider ("value");
    $("#valuestart").html (value);
  },
  stop : function (event)
  {
    var value = $("div#slider").slider ("value");
    $("#valuestop").html (value);
  },
  change : function (event)
  {
    var value = $("div#slider").slider ("value");
    $("#valuechange").html (value);
  },
  slide : function (event)
  {
    var value = $("div#slider").slider ("value");
    $("#valueslide").html (value);
  }
});

</script>

The result of this script is shown in Figure 7-4.

Figure 7-4. Displaying the value of an indicator on ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.