Chapter 7. Sliders

Sliders are widgets that allow users to change the numerical value of data by moving a cursor on a graduated axis. For example, a graduated slider from 18 to 100 can allow users to select age graphically rather than entering it manually in an input field.

Basic Principles of Sliders

To display a slider like the one shown in Figure 7-1, we write the following HTML code, followed once again by a call to the jQuery UI method, which manages this type of graphical component:

<!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 />

<div id=slider></div>


$("div#slider").slider ();


The slider (axis and cursor) is represented by a <div> element (with slider ID).

A <script> tag is added to indicate that each <div> corresponding to a slider is managed by the slider () method.

The operation of a slider is simple: you can move the cursor on its axis either by dragging it with the mouse (drag-and-drop mechanism) or by clicking on a point on the axis. In both cases, the cursor moves to the indicated location.

A slider in the HTML page

Figure 7-1. A slider in the HTML page

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.