MooTools Font Size Scroller with Cookie Save

Providing users as many preferences as possible always puts a smile on the user’s face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That’s why this MooTools-driven font-size slider has been developed. It saves the user’s preference into a cookie.

There’s actually very little javascript to this create this functionality, Thanks to MooTools. Once the DOM is ready, we read in the saved font size (if one exists) and set it accordingly. Next we create our update message slider javascript. The last part is the fun part: the font size slider. The options are fairly self explanatory until the change event.

On slider change, we:

• update the font size label
• write a cookie to save the font size value
• change the document’s font size
• slide in the update text and slide it out two seconds later

View Tutorial

View Demo