Facebook Sliders With Mootools and CSS

One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and the slider. A slider allows the user to drag a slider across a given plain to set a value instead of the boring, tedious text box. I've created a very simple 3-slider system that allows a user to modify the height, width, and opacity of an image using just sliders! Here's how it will look:

Step 1: The CSS

#opacity-area, #width-area, #height-area		{ background:url(horizontal.jpg) 0 8px no-repeat; height:23px; width:500px; margin:0 0 5px 0; }
#opacity-slider, #width-slider, #height-slider	{ background:url(button-horizontal.jpg) no-repeat; width:33px; height:23px; cursor:pointer; }

There's very little CSS involved. I've used the following two JPG's as background images for the sliders:

Step 2: The XHTML

<img src="muse.jpg" id="muse" />

<div id="opacity-area">
	<div id="opacity-slider"></div>
</div>
<div>
	<strong>Opacity:</strong> <span id="opacity-label"></span>%
</div>
<br /><br />

<div id="width-area">
	<div id="width-slider"></div>
</div>
<div>
	<strong>Width:</strong> <span id="width-label"></span> pixels
</div>
<br /><br />

<div id="height-area">
	<div id="height-slider"></div>
</div>
<div>
	<strong>Height:</strong> <span id="height-label"></span> pixels
</div>
<br /><br />
<p><i>The muse, as always, is Christina Ricci.</i></p>

Again, very little XHTML code is involved. Basically just containers for the pieces of the sliders.

Step 3: The MooTools JavaScript

window.addEvent('domready', function () {
	/* opacity slider */
	var mySlide = new Slider($('opacity-area'), $('opacity-slider'), {
		steps: 100,
		wheel: 1,
		onChange: function(step){
			$('opacity-label').set('html',step);
			$('muse').set('opacity',step / 100);
		}
	}).set(100);
	
	/* height slider */
	var mySlide = new Slider($('height-area'), $('height-slider'), {
		steps: 300,
		wheel: 1,
		onChange: function(step){
			$('height-label').set('html',step);
			$('muse').set('height',step);
		}
	}).set(300);
	
	/* width slider */
	var mySlide = new Slider($('width-area'), $('width-slider'), {
		steps: 300,
		wheel: 1,
		onChange: function(step){
			$('width-label').set('html',step);
			$('muse').set('width',step);
		}
	}).set(300);
});

This code is very repetitive, which in turn makes it very easy. We create a new Slider instance for each slider we want on the page, providing the class the respective "area" and "slider" elements. We'll also pass the class steps (height value -- low value defaults to 0), a "wheel" value that allows value modification using the mouse wheel, and a change event function that changes the visible value label and adjusts the image's width or height or opacity level. Lastly, we use the "set()" function to set the default value of the slider.

That's All Folks!

There are many uses for sliders and I could take this example further to make it truly usable. I could, for example, take in the settings of each slider and generate a new image for the user to download. How you use it, however, is up to you.