Otro Slider para controlar el texto

Sólo que esta vez con librería Mootools (Y es que ya habíamos visto uno parecido con Query)

Podéis verlo en acción en la página de demos de Mootools, y en este blog de Pruebas (en la cabecera de las entradas veréis el slider: sólo tenéis que arrastrarlo con el ratón para ver cómo el texto se agranda y encoge).

Vamos a ver los pasos:

.- CSS:

div.slider {
width: 200px;
height: 16px;
background: #eee;
}
div.slider div.knob {
background: #000;
width: 16px;
height: 16px;
}
div#fontSize {
height: 50px;
}

div.advanced {
width: 400px;
margin: 5px 0;
background: url(http://.../slider.png) 0 center repeat-x;
}
div.advanced div.knob {
background: no-repeat center center;
cursor: pointer;
}
div#red div.knob {
background-image: url(images/red.png);
}
div#green div.knob {
background-image: url(images/green.png);
}
div#blue div.knob {
background-image: url(images/blue.png);
}

.- SCRIPTS:

<script type='text/javascript'>



//<![CDATA[

window.demo_path = '';

//]]>

</script>

<script src='http://.../demos_mootools.js' type='text/javascript'>

</script>

<script src='http://.../assets_scripts_site.js' type='text/javascript'>

</script>



<script src='http://.../Slider_demo.js' type='text/javascript'>

</script>

.- HTML: Colocad el slider en el sitio de vuestra plantilla que deseéis (pero no olvidéis cerrar el último "div"):

<div class='slider' id='myElement'>

<div class='knob'/>

</div>

<div id='fontSize'>

.....

</div>

Como siempre: cuidadín con las ID ...