Scriptaculous causes jquery ui's slider widget to fail in IE8. Is there a workaround?

Scriptaculous causes jquery ui's slider widget to fail in IE8. Is there a workaround?

In a previous question I asked about a problem in which PrototypeJS was causing jQuery UI's slider widget to fail in IE8.  Big thanks to Scott, et al, for committing a fix rapid-fire!  

Now I've found that, in fact, Scriptaculous also causes an IE8 failure, though with slightly different behavior. 

In the below code under IE8, the $j().slider call produces an "Object doesn't support this property or method" error, and the slider widget is not rendered.

(Yes, one moral of this tale might be "don't use prototype and jquery together", but one doesn't always have complete control over one's existing code base...)

Thanks!
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6.   <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
  7.   <!-- eliminating this reference to scriptaculous resolves the problem -->
  8.   <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
  9.   <!-- jquery built from http://github.com/jquery/jquery/commit/6dfdb14753c66cfd38f8445bd6119ef4a1274d5e -->
  10.   <script src="/javascripts/jquery-6dfdb14.js"></script>
  11.   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js" type="text/javascript"></script>
  12.   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" />
  13.   <script type="text/javascript">
  14.     var $j = jQuery.noConflict();
  15.     $j(function () {
  16.       var setupVolumeSlider = function () {
  17.         $j("#volume-slider").slider({
  18.           orientation: "vertical",
  19.           min: 0,
  20.           max: 100
  21.         });
  22.       };
  23.       setupVolumeSlider();
  24.     });
  25.   </script>
  26.   <style type="text/css">
  27.     body { padding: 100px; }
  28.     div#volume-slider { height: 100px;}
  29.   </style>
  30.   </head>
  31.   <body>
  32.     <div id="volume-slider"></div>
  33.   </body>
  34. </html>