CODEWITHSUNDEEP
jqueryuser-interfacesliderfont-size
Patrik
Patrik

Reputation: 1327

jQuery UI Slider for font-size

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');
});

Upvotes: 3

Views: 3479

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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

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

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

Upvotes: 3

Related Questions