Facebook Sliders With Mootools and CSS - A very simple 3-slider system that allows a user to modify the height, width, and opacity of an image using just sliders!

The CSS

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

The XHTML

1. <img src="muse.jpg" id="muse" />  
2.   
3. <div id="opacity-area">  
4.     <div id="opacity-slider"></div>  
5. </div>  
6. <div>  
7.     <strong>Opacity:</strong> <span id="opacity-label"></span>%  
8. </div>  
9. <br /><br />  
10.   
11. <div id="width-area">  
12.     <div id="width-slider"></div>  
13. </div>  
14. <div>  
15.     <strong>Width:</strong> <span id="width-label"></span> pixels  
16. </div>  
17. <br /><br />  
18.   
19. <div id="height-area">  
20.     <div id="height-slider"></div>  
21. </div>  
22. <div>  
23.     <strong>Height:</strong> <span id="height-label"></span> pixels  
24. </div>  
25. <br /><br />  
26. <p><i>The muse, as always, is Christina Ricci.</i></p>
    

The MooTools Javascript

1. window.addEvent('domready', function () {  
2.     /* opacity slider */  
3.     var mySlide = new Slider($('opacity-area'), $('opacity-slider'), {  
4.          steps: 100,  
5.          wheel: 1,  
6.          onChange: function(step){  
7.              $('opacity-label').setHTML(step);  
8.              $('muse').set('opacity',step / 100);  
9.          }  
10.      }).set(100);  
11.       
12.     /* height slider */  
13.     var mySlide = new Slider($('height-area'), $('height-slider'), {  
14.          steps: 300,  
15.          wheel: 1,  
16.          onChange: function(step){  
17.              $('height-label').setHTML(step);  
18.              $('muse').set('height',step);  
19.          }  
20.      }).set(300);  
21.       
22.     /* width slider */  
23.     var mySlide = new Slider($('width-area'), $('width-slider'), {  
24.          steps: 300,  
25.          wheel: 1,  
26.          onChange: function(step){  
27.              $('width-label').setHTML(step);  
28.              $('muse').set('width',step);  
29.          }  
30.      }).set(300);  
31. });
    

Demo: http://davidwalsh.name/dw-content/sliders.php
From: http://davidwalsh.name/facebook-sliders-mootools