jQuery UI Text Slider

Text Slider example using jQuery UI.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div class="siteContainer">
    <div id="bodyText">
        <h1>jQuery text size slider widget</h1>
        <p>Unlike the original HTML forms, the 
            creators of XForms have used a Model-View-Controller approach. The 
            "model" consists of one or more XForms models describing form data, 
            constraints upon that data, and submissions. The "view" describes what 
            controls appear in the form, how they are grouped together, and what 
            data they are bound to. CSS can be used to describe a form's appearance.</p>
        
        <p>An XForms document can be as simple as an 
            HTML form (by only specifying the submission element in the model 
            section, and placing the controls in the body), but XForms includes many
            advanced features. For example, new data can be requested and used to 
            update the form while it is running, much like using XmlHttpRequest/AJAX
            except without scripting. The form author can validate user data 
            against XML Schema data types, require certain data, disable input 
            controls or change sections of the form depending on circumstances, 
            enforce particular relationships between data, input variable length 
            arrays of data, output calculated values derived from form data, prefill
            entries using an XML document, respond to actions in real time (versus 
            at submission time), and modify the style of each control depending on 
            the device they are displayed on (browser versus mobile versus text 
            only, etc.). There is often no need for any scripting with languages 
            such as JavaScript.</p>
        
        <p>Like legacy forms, XForms can use...

CSS

body {
    padding:20px 0 0 40px;
    background:#C0C5A4;
    font-size:16px;
}
h1 {
    font-size:24px;
    margin-bottom:20px;
    padding:0;
    margin:0;
}
p{font-size:110%;margin-bottom:20px;}
.siteContainer {
    width:980px;
    padding:20px;
    border:1px solid #DDD;
    margin:0 auto;
    background:#FFF;
    border:3px solid #ACB28D;
}
.fontSliderHolder {
    float:left;
    width:200px;
    padding:6px 6px 6px 10px;
    margin:0 0 0 20px;
    border:1px solid #CCC;
    background:#EEE;
}
.holder {
    padding:10px !important;
    width:130px;
    float:left;
}
.sliderLabelHolder {
    width:24px;
    height:40px;
    float:left;
}
.sliderLabelContainer {
    color:#999;
}
.sliderT {
    font-size:100%;
    float:left;
    width:20px;
    position:relative;
    top:8px;
}
.sliderB {
    font-size:200%;
}
#bodyText{
    width:740px;
    float:left;
}
.clearBlock {
    clear:both;
}

JavaScript

$(function() { /*set initail font value to 120% */
    $("#slider-horizontal").slider({
        orientation: "horizontal",
        range: "min",
        min: 100,
        max: 200,
        value: 110,
        slide: function(event, ui) {
            $("p").css("font-size", ui.value + "%");
            $("p").css("line-height", ui.value + "%");
        }
    });
});