Sliders are a more restricted way of inputting numeric values, as shown in Table 8-15. The old- fashioned method of using text fields with masks or validations has drawbacks. Using a slider is visually cleaner and intuitive. The sliders are either vertical or horizontal.
In the following example, three vertical sliders are created, and positioned side by side to give a visual “mixer” look:
<!DOCTYPE html>
<html>
<head>
<link href=”css/ui-lightness/jquery-ui-1.8.13.custom.css” rel=”stylesheet” />
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script src=”js/jquery-ui-1.8.13.custom.min.js”></script>
<style type=”text/css”>
div {
float : left;
margin-left : 30px;
margin-right : 30px;
}
</style>
<script type=”text/javascript”>
$(function(){
$( ‘#slider1’ ).slider({
orientation : “vertical”
});
$( ‘#slider2’ ).slider({
orientation : “vertical });
$( ‘#slider3’ ).slider({
orientation : “vertical
});
});
</script>
</head>
<body>
<div id=”slider1″></div>
<div id=”slider2″></div>
<div id=”slider3″></div>
</body>
</html>
Code snippet is from slider.txt
Your output should look something like Figure 8-6.
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc