How to Control Text Properties using jQuery and UI Slider

jQuery UI Slider tutorial. Today I will tell how you can use jQuery to animate and control your text. We will changing font size, font family and other properties. Where we can use this? As example to allow your users to customize view of text boxes in your website. So, playing with styles – users will be able to select preferred styles, and you will need just save these styles for him, or, you can use this as some zoon for your website, which will allow to change font size in realtime. Also we will using jQuery slider to manipulate with properties to make it more interactive.

 

Step 1. HTML

This is our HTML file with 4 different sliders to change styles:

index.html

HTML
<link rel="stylesheet" href="css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.ui.slider.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />

<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.slider.js"></script>
<script src="js/main.js"></script>

<div class="examples">
    <h2>Text animation with jQuery and UI slider</h2>
    <div class="column">
        <p>
            <label for="font_size">Font size:</label>
            <input type="text" id="font_size" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider1"></div>
    </div>
    <div class="column">
        <p>
            <label for="font_family">Font family:</label>
            <input type="text" id="font_family" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider2"></div>
    </div>

    <div class="column">
        <p>
            <label for="font_weight">Font weight:</label>
            <input type="text" id="font_weight" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider3"></div>
    </div>
    <div class="column">
        <p>
            <label for="text_align">Text align:</label>
            <input type="text" id="text_align" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider4"></div>
    </div>
    <div style="clear:both"></div>
    <div class="box">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>
    <div style="clear:both"></div>
</div>

Step 2. CSS

Here are all used CSS files:

css/main.css

CSS
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
.column{float:left;width:45%;padding:20px}
.box{-moz-border-radius:5px;background-color:#DDD;border:1px solid #000;clear:both;width:50%;margin:10px auto;padding:10px}

css/jquery.ui.slider.css, css/jquery.ui.theme.css

Both these files belong to jQuery library, and no need to publish its code directly in our post, both files already available in package

Step 3. JS

js/main.js

JavaScript
$(function() {
    $('#slider1').slider({
        value:12,
        min: 10,
        max: 20,
        step: 1,
        slide: function( event, ui ) {
            $('#font_size').val(ui.value + ' px');
            $('.box').css('font-size', ui.value);
        }
    });
    $('#font_size').val($('#slider1').slider('value') + ' px');

    var aFonts = new Array('', 'Verdana', 'arial', 'Tahoma', 'Times New Roman', 'Georgia');
    $('#slider2').slider({
        value:1,
        min: 1,
        max: 5,
        step: 1,
        slide: function(event, ui) {
            var sFontFamily = aFonts[ui.value];
            $('#font_family').val(sFontFamily);
            $('.box').css('font-family', sFontFamily);
        }
    });
    $('#font_family').val(aFonts[$('#slider2').slider('value')]);

    var aWeights = new Array('', 'normal', 'bold', 'bolder', 'lighter', 'inherit');
    $('#slider3').slider({
        value:1,
        min: 1,
        max: 5,
        step: 1,
        slide: function(event, ui) {
            var sFontWeight = aWeights[ui.value];
            $('#font_weight').val(sFontWeight);
            $('.box').css('font-weight', sFontWeight);
        }
    });
    $('#font_weight').val(aWeights[$('#slider3').slider('value')]);

    var aAligns = new Array('', 'left', 'right', 'center', 'justify');
    $('#slider4').slider({
        value:1,
        min: 1,
        max: 4,
        step: 1,
        slide: function(event, ui) {
            var sTextAlign = aAligns[ui.value];
            $('#text_align').val(sTextAlign);
            $('.box').css('text-align', sTextAlign);
        }
    });
    $('#text_align').val(aAligns[$('#slider4').slider('value')]);
});

Here are you can see initializations of 4 UI sliders. For changing font size, font family, bold style and text align for text of our text box. Hope this is very easy to understand how to use it.

js/jquery.min.js, js/jquery.ui.core.js, js/jquery.ui.mouse.js, js/jquery.ui.slider.js, js/jquery.ui.widget.js

All this – just jQuery libraries, its necessary for our UI slider. All these libraries available in package.

 

Conclusion

I hope that today’s article will very useful for your projects. Good luck!