SliderとjQuery API/CSSを利用して、ハンドルを動かすとWebブラウザで表示している文書の文字サイズを動的に変更できるサンプルを作ってみた。

HTMLファイル - slider_apicss.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css">
<title>jQuery UI 1.5.1 Demos / Slider with API/CSS</title>
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery-ui-personalized-1.5.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() 
{
    var slider = $('#slider');
    var slider_ui = $('#slider_ui');
    var slider_value = $('#slider_value');

    slider.css('width', '300px');
    slider_ui.css('font-size', '12pt');
    $('body').css('font-size', '100%');

    slider_value.text('100');

    slider.slider(
    {
        min: 50,
        max: 300,
        startValue: 100,
        slide: function (event, ui)
        {
            $('body').css('font-size', ui.value + '%');
            slider_value.text(ui.value);
        }
    });
}
);
-->
</script>

</head>

<body>

<div id="slider_ui">
    min(50)← value: <span id="slider_value"> </span> →max(300)
    <div id="slider"></div>
</div>

<h1>Slider</h1>

<p>Slider - A sliding input element</p>

</body>

</html>

Windows XP SP2 / Internet Explorer 7でアクセス。IE7ではbodyに指定したフォントサイズが、h1に継承されないようだ

FreeBSD 8-current / Firefox 3でアクセス。ハンドルを動かすと文字サイズが変わる

動画: Windows XP SP2 / Internet Explorer 7でアクセスし、実際に操作しているところ