En el Blog de david walsh, me he encontrado con estos utiles Sliders echos con CSS y Usando Mootools, lo mejor de estos Sliders es que permiten redimencionar una imagen y guardar los cambios, bien el codigo usado en este proyecto es el siguiente:

HTML

< View plain text >
HTML

  1. <img src="muse.jpg" id="muse" />
  2.  
  3. <div id="opacity-area">
  4.     <div id="opacity-slider"></div>
  5.  
  6. </div>
  7. <div>
  8.     <strong>Opacity:</strong> <span id="opacity-label"></span>%
  9. </div>
  10. <br /><br />
  11.  
  12. <div id="width-area">
  13.     <div id="width-slider"></div>
  14. </div>
  15. <div>
  16.     <strong>Width:</strong> <span id="width-label"></span> pixels
  17.  
  18. </div>
  19. <br /><br />
  20.  
  21. <div id="height-area">
  22.     <div id="height-slider"></div>
  23. </div>
  24. <div>
  25.     <strong>Height:</strong> <span id="height-label"></span> pixels
  26. </div>
  27. <br /><br />
  28. <p><a href="#" id="save-image">Save Customized Image</a></p>

CSS

< View plain text >
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; }

Mootools

< View plain text >
js

  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').set('html',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').set('html',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').set('html',step);
  28.             $('muse').set('width',step);
  29.         }
  30.     }).set(300);
  31.    
  32.     /* link click */
  33.     $('save-image').addEvent('click',function() {
  34.         alert('generating...');
  35.         $('muse').set('src','sliders-ajax-save-php.php?width=' + $('width-label').getText() + '&height=' + $('height-label').getText() + '&opacity=' + $('opacity-label').getText());
  36.         $('muse').setStyles({
  37.             'border':'2px dotted #999;',
  38.             'padding':'10px'
  39.         });
  40.         $('muse').set('opacity',100);
  41.         alert('done!');
  42.     });
  43. });

PHP

< View plain text >
php

  1. /* do i even do anything? */
  2. if(isset($_GET['opacity']) && isset($_GET['width']) && isset($_GET['height']))
  3. {
  4.     //initial vars
  5.     $original_file = 'sliders/muse.png';
  6.     $opacity = intval($_GET['opacity']) / 100;
  7.     $width = intval($_GET['width']);
  8.     $height = intval($_GET['height']);
  9.     list($original_width,$original_height) = getimagesize($original_file);
  10.    
  11.     //create a new, virtual image
  12.     $image = imagecreatetruecolor($width, $height);
  13.     $source = imagecreatefrompng($original_file);
  14.     filter_opacity($source,$opacity);
  15.     imagecopyresized($image,$source,0,0,0,0,$width,$height,$original_width,$original_height);
  16.    
  17.     $background = imagecolorallocate($image, 0, 0, 0);
  18.     imagecolortransparent($image, $background); // make the new temp image all transparent
  19.     imagealphablending($image, false); // turn off the alpha blending to keep the alpha channel
  20.    
  21.     //output
  22.     header('Content-type: image/png');
  23.     imagepng($image);
  24.     imagedestroy($image);
  25. }
  26.  
  27.  
  28. /* from PHP.net -- http://us2.php.net/manual/en/function.imagefilter.php */
  29. function filter_opacity( &$img, $opacity ) //params: image resource id, opacity in percentage (eg. 80)
  30. {
  31.     //get image width and height
  32.     $w = imagesx( $img );
  33.     $h = imagesy( $img );
  34.  
  35.     //turn alpha blending off
  36.     imagealphablending( $img, false );
  37.  
  38.     //find the most opaque pixel in the image (the one with the smallest alpha value)
  39.     $minalpha = 127;
  40.     for( $x = 0; $x < $w; $x++ )
  41.          for( $y = 0; $y < $h; $y++ )
  42.               {
  43.                     $alpha = ( imagecolorat( $img, $x, $y ) >> 24 ) & 0xFF;
  44.                     if( $alpha < $minalpha )
  45.                          { $minalpha = $alpha; }
  46.               }
  47.  
  48.     //loop through image pixels and modify alpha for each
  49.     for( $x = 0; $x < $w; $x++ )
  50.          {
  51.               for( $y = 0; $y < $h; $y++ )
  52.                     {
  53.                          //get current alpha value (represents the TANSPARENCY!)
  54.                          $colorxy = imagecolorat( $img, $x, $y );
  55.                          $alpha = ( $colorxy >> 24 ) & 0xFF;
  56.                          //calculate new alpha
  57.                          if( $minalpha !== 127 )
  58.                               { $alpha = 127 + 127 * $opacity * ( $alpha - 127 ) / ( 127 - $minalpha ); }
  59.                          else
  60.                               { $alpha += 127 * $opacity; }
  61.                          //get the color index with new alpha
  62.                          $alphacolorxy = imagecolorallocatealpha( $img, ( $colorxy >> 16 ) & 0xFF, ( $colorxy >> 8 ) & 0xFF, $colorxy & 0xFF, $alpha );
  63.                          //set pixel with the new color + opacity
  64.                          if( !imagesetpixel( $img, $x, $y, $alphacolorxy ) )
  65.                               { return false; }
  66.                     }
  67.          }
  68.     return true;
  69. }

Pueden ver un demo aqui.
Descarga el Codigo aqui.

O puedes visitar la web del autor aqui.

Nota: El codigo del autor tenia varios Bugs la version de mootols en La clase ELEMENT ya no implementa la funcion getText que usa el autor por lo cual se le tubo que agregar, a continuacion les dejo el codigo agregado:

< View plain text >
js

  1. getText: function() {
  2.         return ($pick(this.innerText, this.textContent))
  3.     }