Facebook Sliders With Mootools and CSS

By  on  

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.

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    Ana Tudor&#8217;s Favorite CodePen Demos

    Cocoon I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though...

  • By
    Use Custom Missing Image Graphics Using Dojo

    A few months back I posted an article about how you can use your own "missing image" graphics when an image fails to load using MooTools and jQuery. Here's how to do the same using Dojo. The HTML We'll delegate the image to display by class...

Discussion

  1. Andrew

    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

    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

    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

    Thanks David! :)

  7. Lu Xin

    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. bob

    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. jason

    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. okan

    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. Marcello

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!