O'Reilly logo

jQuery UI by Eric Sarrion

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required