title: Range selector in javascript. Invalid scope?
body: <p>I'm trying to achieve a range selector plugin in jquery. You can see the somewhat working version in</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/franciscop/yHAY9/2/" rel="nofollow">http://jsfiddle.net/franciscop/yHAY9/2/</a></p>
  </blockquote>
  
  <p>However it's not properly working. The arrow above has to go (maximum) to the position of the arrow below, and viceversa. Besides, in the console log, when I move only the top arrow it shows <code>TypeError: boxpos is undefined</code>. I think I'm defining the scope properly, is it because I'm not or because there are two elements for the same plugin that interfere with each other? Here's the html:</p>
  
  <pre><code>&lt;div class = "range"&gt;
    &lt;div class = "start"&gt;◀&lt;/div&gt;
    &lt;div class = "show"&gt;&lt;/div&gt;
    &lt;div class = "end"&gt;◀&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the javascript:</p>
  
  <pre><code>// Make the main form to be draggable
  (function ($, window) {
    $.fn.range = function(mini, maxi) {
      // The element to be clicked
      var arrow = this;
      // The current position when clicked
      var boxpos;
  
      // Minimum position that it can achieve
      var mini = $(mini).offset().top;
      var maxi = $(maxi).offset().top + $(maxi).height();
  
      // The position of the mouse
      var mouse;
  
      $(arrow).mousedown(function(event){
        arrow.addClass("dragby");
        boxpos = arrow.offset();
        mouse = event;
        // Avoid selecting text
        event.preventDefault();
        });
  
      $(window).on("mousemove", function(event){
        // Is there anything to be dragged
        if($('.dragby').length)
          {
          $('.dragby').offset({
            top: boxpos.top + event.pageY - mouse.pageY
            });
          if (event.pageY &lt; mini)
            $('.dragby').offset({
              top: mini
              });
          if (event.pageY &gt; maxi)
            $('.dragby').offset({
              top: maxi
              });
          }
        });
  
      $(window).mouseup(function(event){
        arrow.removeClass("dragby");
        // Avoid any link/anything that could be there
        event.preventDefault();
        });
  
      return this;
      }
    }(jQuery, window));
  // END OF PLUGIN
  
  
  $(".range .start").range(".range", ".end");
  $(".range .end").range(".start", ".range");
  </code></pre>
  
  <p>Note: if possible try to answer <strong>without jquery ui</strong>, I prefer not to add another dependency just because of this.</p>