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).
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.
Figure 7-1. A slider in the HTML page
Formatting Content
The use of the slider () method changes the appearance of HTML elements in the page, adding new CSS classes that give them the appropriate ...
Get jQuery UI now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
