Hola Desarrolladores de todo el mundo.

Me gustaría recibir ayuda con un Javascript simple y puro.(30 líneas), JQuery gratis(y otras bibliotecas) control deslizante de control deslizante.

He estado buscando meses y encontré muchos scripts, pero no me gusta. -Jquery porque la mayoría de los scripts necesitan 4, 5, 6, javascript incluye ... Prefiero los scripts más pequeños y básicos ... me gusta ajustarlos como quiero y también puedo lean mucho de scripts más pequeños.

Todo lo que necesito es un control deslizante simple que puedo usar para: volver a escalar imágenes, desplazar la página, cambiar el brillo de las imágenes(con PHP) etc.

Soy nuevo con javascript(2 meses), esto es lo lejos que llego ahora ... Lo siento por los nombres de variables incorrectos ...

    <script type="text/javascript">  
      _item = null;
      mouse_x = 0;
      drag_x = 0; 
      function move_init() {
        document.onmousemove = _move;
        document.onmouseup = _stop;
      }
      function _stop(){
         _item = null;
      }
      function _move(e){
        mouse_x = document.all ? window.event.clientX : e.pageX;
        if(_item != null){
             _item.style.left = (mouse_x - drag_x) + "px";
        }
      }
      function _move_item(drag)
      {
        _item = drag;
        drag_x = mouse_x - _item.offsetLeft;
      }
move_init();
drag.onmousedown=_move_item();   // Agh.. did'nt figure out how this works
</script>

<style type="text/css">
#drag{background:#797979;color:#fff;width:30px;height:15px;position:relative;}
#track{background:red; width:200px;}
</style>

<div id="track"><div id="drag" onmousedown="_move_item(this);" >x</div></div>

Aprecio tu ayuda.

Escribí esto el 31 de diciembre de 2012. Feliz año nuevo. Por favor sean buenos el uno para el otro.

Gracias.