jQuery UI滑块不显示

我已经安装了jQuery UI滑块，但它不显示在我的代码中。我不明白我做错了什么。jQuery UI滑块不显示

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Home Page</title> 
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="/Scripts/jquery-ui-1.8.18.min.js" type="text/javascript"></script> 
    <script src="/Scripts/modernizr-2.5.3.js" type="text/javascript"></script> 

</head> 
<body> 
    <div class="page"> 
     <section id="main"> 
      <link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript"> 



    $(function() { 
      ... 
      $("#bwvolume").slider({ 
       value: 0, 
       min: 0, 
       max: 2500, 
       step: 100, 
       slide: function (event, ui) { 
        $("#spanbwvolume").val("$" + ui.value); 
       } 
      }); 
      $("#spanbwvolume").val("$" + $("#bwvolume").slider("value")); 
     }); 
    </script> 
    ... 
     <tr class="format"> 
      <td width="150" valign="top" class="tdlabelNoSize">Volumes monochrome:</td> 
      <td> 
       <div id="bwvolume"></div>(<span id="spanbwvolume"></span>) 
      </td> 
     </tr> 

    ... 
</body> 
</html>

在浏览器中分配了一些空间。但滑块不显示。我的代码基于http://jqueryui.com/demos/slider/#steps。

这是我看到萤火虫：

<tr class="format"> 
<td class="tdlabelNoSize" width="150" valign="top">Volumes monochrome:</td> 
<td> 
<div id="bwvolume" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">slider=Object { element={...}, options={...}, _keySliding=false, meer...} 
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>index.uiSliderHandle=0 
</div> 
(
<span id="spanbwvolume"></span> 
) 
</td> 
</tr>

萤火不会报告任何错误。

我是否错过了像图片或其他东西？在同一页面上我也使用jQuery UI Selectable（未在代码中显示），这工作正常。

来源

2012-03-20 JurgenStillaert