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 /> <h3>Slider</h3> <div id=slider></div> <script> $("div#slider").slider (); </script>
The slider (axis and cursor) is represented by a
<div> element (with slider ID).
<script> tag is added to
indicate that each
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.
Figure 7-1. A slider in the HTML page