Mootools - fontSized by slider!

by Joe Saad

HTML

<div id="slider" class="slider">
    <div class="knob"></div>
</div>
<div id="fontSize">Change the value, to change the fontsize.</div>



<p>Selected color: <span id="setColor"></span></p>

CSS

.slider {
    background: #CCC;
    height: 16px;
    width: 200px;
}
    .slider .knob {
        background: #000;
        width: 16px;
        height: 16px;
    }

#fontSize {
    height: 50px;
    line-height: 50px;
}

.advanced {
    width: 400px;
    margin: 5px 0;
    background: #CCC;
}
    .advanced .knob {
        cursor: pointer;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }
#red .knob {
    background: red;
}
#green .knob {
    background: green;
}
#blue .knob {
    background: blue;
}

JavaScript

window.addEvent('domready', function(){

    var slider = $('slider');

    new Slider(slider, slider.getElement('.knob'), {
        range: [0, 100],
        initialStep: 14,
        onChange: function(value){
            if (value) $('fontSize').setStyle('font-size', value);
            $('fontSize').set('text',value);
        }
            
    });

});