jQuery UI Slider for font-size

Question

I'm trying to make jQuery UI Slder as slider for choose 'font-size'. I don't know where is mystake in my syntax, but it does not work. Number in text input is changeing, but text-size not...

EXAMPLE

HTML :

<div id="slider"></div>
<input type="text" id="font_size" style="border:0; color:#222; font-weight:bold;" />

<div class="textBox">Lorem ipsum dolor sit amet, id quaestio percipitur vel. Zril propriae vis in, an mei commune invidunt. Nam et nibh consul, vim ei facer nonumes principes. Nec te facilis noluisse. Utinam doming perfecto eum id, mea at patrioque liberavisse, at sit abhorreant referrentur.</div>

jQuery :

$(function() {
    var aFontsSizeArray = new Array('5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '26', '28', '30', '33', '36', '39', '42', '45', '48', '55', '65', '75', '85', '95', '110', '130', '150');
    $('#slider').slider({
        value: 7,
        min: 1,
        max: 35,
        step: 1,
        slide: function(event, ui) {
            var sFontSizeArray = aFontsSizeArray[ui.value];
            $('#font_size').val(sFontSizeArray + ' px');
            $('.textBox').css('font-size', sFontSizeArray );
        }
    });
    $('#font_size').val((aFontsSizeArray[$('#slider').slider('value')]) + ' px');
});

Answer 1

You forgot to add the + 'px' in your code:

$('.textBox').css('font-size', sFontSizeArray + 'px' );

Fiddle: http://jsfiddle.net/AhcD6/3/