title: PrototypeJS causes jQuery ui's slider widget to fail in IE8. Is there a workaround?
body: <p>I am using <a href="http://jqueryui.com/demos/slider/" rel="nofollow noreferrer">jQuery UI's slider widget</a>, and if the <a href="http://prototypejs.org/" rel="nofollow noreferrer">prototype js library</a> is also included on the page, I find the following incorrect behavior in IE8 (other browsers are fine):</p>
  
  <ul>
  <li><p>While hovering over the handle, pressing and holding the mouse button causes the handle to immediately jump to the bottom of the slider.  Attempting to drag does not move the handle.</p></li>
  <li><p>However, if I click a point on the slider <em>other</em> than the current position of the handle, the handle jumps to that point, and I can then drag the handle freely (as it should.)</p></li>
  </ul>
  
  <p>Eliminating prototype from the page resolves this behavior.</p>
  
  <p>Code below -- I am using <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" rel="nofollow noreferrer">jQuery's noconflict</a> so in principle Prototype and jQuery should play nice together...but clearly something's going awry here.</p>
  
  <p>Any ideas about how to work around this?  Thanks so much!</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
    &lt;!-- eliminating the following line resolves the bug --&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" /&gt;
    &lt;script type="text/javascript"&gt;
      var $j = jQuery.noConflict();
      $j(function () {
        var setupVolumeSlider = function () {
          $j("#volume-slider").slider({
            orientation: "vertical",
            min: 0,
            max: 100
          });
        };
        setupVolumeSlider();
      });
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
      body { padding: 100px; }
      div#volume-slider { height: 100px;}
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="volume-slider"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>