Treehouse

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.

ydkjs-3.png

Recent Features

  • 9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • Rotate Elements with CSS Transformations

    I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations...

  • Face Detection with jQuery

    I've always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it's voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I...

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.

  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 […]

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