title: Simple pure Javascript drag controller slider
body: <p>Hi Developers all over the world.</p>
  
  <p>I would like to have some help with a simple, pure Javascript <em>(30 lines)</em>, JQuery free <em>(and other library's)</em> <strong>drag control slider.</strong></p>
  
  <p>I have been searching months and found many scripts but i don't like -Jquery cause most script need 4, 5, 6 javascript includes..  I prefer smaller and basic script..  i like to ajust them like i want and i also can lean alot from smaller scripts.</p>
  
  <p>All i need is a simple slider that i can use for:  rescale images, scroll page, change brightness on images <em>(with PHP)</em> etc.</p>
  
  <p>I am new with javascript <em>(2 months)</em>, this is how far i get now.. Sorry for the bad variable names...</p>
  
  <hr>
  
  <pre><code>    &lt;script type="text/javascript"&gt;  
        _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
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  #drag{background:#797979;color:#fff;width:30px;height:15px;position:relative;}
  #track{background:red; width:200px;}
  &lt;/style&gt;
  
  &lt;div id="track"&gt;&lt;div id="drag" onmousedown="_move_item(this);" &gt;x&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>i appriciate your help. </p>
  
  <p>I wrote this on 31 december 2012.. So happy new year. Please be good for each other.</p>
  
  <p>Thank you.</p>