Facebook Sliders With Mootools and CSS

Written by David Walsh on April 16, 2008 · 21 Comments

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:

slidin'!

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:

slidin'!

slidin'!

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.

Comments

  1. Hi,

    This doesn’t really count as “progressive enhancement”:http://en.wikipedia.org/wiki/Progressive_Enhancement insasmuch as the functionality breaks without javascript.

  2. @Andrew: You can’t go Wikipedia on me! You’re right on the true definition of “progressive enhancement.” Maybe “visual enhancement” would have been better?

  3. Jonathan April 27, 2008

    Hi David,

    I’m trying to get your Facebook Sliders example to work with MooTools 1.11 however I’m not having much success. Safari’s web inspector says there’s an error which I’ve located, it’s these lines of code:

    $(‘muse’).set(‘height’,step);

    The other two similar code are also the same. If I comment these lines out, there’s no error and of course the example doesn’t work properly. Is there anything I can do to fix these lines to make it compatible with MooTools 1.11?

    Could you please let me know and thanks for the example! :)

    Jonathan

  4. Jonathan April 27, 2008

    Oops, forgot to mention, what does the “wheel” option do? MooTool’s Demo example doesn’t have this option, is this a new option in MooTools 1.2? :)

  5. @Jonathan: The “set” method has become more prominent in Moo 1.2. Here’s what you need for 1.1:

    $(’muse’).setProperty(’height’,step);
    $(’muse’).setProperty(’width’,step);
    $(‘muse’).setOpacity(step / 100);

    Also, the “wheel” option allows you to use the mouse wheel to control the slide you’re hovered over, which is a new option in 1.2.

  6. Jonathan April 27, 2008

    Thanks David! :)

  7. This is a good article, but I encountered a problem, if the regulation of the transparency of the page background image how to do it! Can you help me?

    From China’s Lu Xin

  8. Hey pretty cool again.

    you’ve got some really nice tutorial here.

    But i would like to know if we can make one slider zooming the image proportionally, and have the image in a div with overflow hidden, that way it can become a zoom.
    And i guess a simple “drag” apply to the image will help to move around a map as an example ;)

    cheers

  9. for usability, how would one make the opacity, height, and width set by text inputs?

  10. Would it be possible to create for instance 4 sliders which would b depend on each other like if you had a 100% value that you would like to distribute over the 4 sliders.So when you moved on the value that was addded on the first would subtract on the others?

  11. Hello my friend , have you tried this on facebook application?

  12. Nice article. :D i am going to try that.

  13. i want to create an application for sending greetings from site to facebook,how can crate that ?

  14. great srript david.. thanks, this great

  15. It seems this doesn’t work anymore with newer Mootools Version, as the variable Slider can’t be found.

  16. [...] Facebook Sliders With Mootools and CSS – 按钮拖动 [...]

  17. [...] More Information on Facebook Sliders With Mootools and CSS [...]

  18. […] CSS is very much like my Facebook Sliders article. Feel free to style the slider however you'd […]

  19. […] Facebook Slider with CSS and MooTools […]

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Dynamically Load Stylesheets Using MooTools 1.2
Newer
Load Your Static Content the Dynamic Way