jQuery UI – Making Things Look Slick: Slider

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>



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



<script type=”text/javascript”>


$( ‘#slider1’ ).slider({

orientation : “vertical”


$( ‘#slider2’ ).slider({

orientation : “vertical });

$( ‘#slider3’ ).slider({

orientation : “vertical






<div id=”slider1″></div>

<div id=”slider2″></div>

<div id=”slider3″></div>



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

Leave a Reply

Your email address will not be published. Required fields are marked *