title: jQuery - Slider not working
body: <p>Trying to get a simple slider working... nothing is happening. I do this code below in JSFiddle (jquery 1.7.2, jQueryUI 1.8.1) and it works.. however... in web page.. it does not. It is simple a slider without its handle.</p>
  
  <p>I go into console and there is no (error) message...</p>
  
  <p>Help?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;
  
      &lt;title&gt;Sin título 1&lt;/title&gt;
  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
      $( ".slider" ).slider({
             animate: true,
                 range: "min",
                 value: 50,
                 min: 0,
                 max: 100,
                 step: 1,
                 slide: function( event, ui ) {
                     $("#slider-result").html( ui.value );
                 }
                 });&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  &lt;!--
  body{
  background: #CECECE !important;
  padding:10px;
  }
  
  /*the slider background*/
  .slider {
  width:230px;
  height:10px;
  background: #737373;
  position:relative;
  margin:0;
  padding:0 10px;
  }
  
  /*Style for the slider button*/
  .ui-slider-handle {
  width:16px;
  height:16px;
  position:absolute;
  top:-3px;
  margin-left:-12px;
  z-index:200;
  background:#404040;
      outline:none;
  }
  /*This is the fill bar colour*/
  .ui-widget-header {
  background:#ABABAB;
  height:8px;
  left:1px;
  top:1px;
  position:absolute;
  }
  ​
  --&gt;
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="slider"&gt;&lt;/div&gt;
  &lt;div id="slider-result"&gt;50&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's a working fiddle apparently. <a href="http://jsfiddle.net/D45mp/" rel="nofollow">http://jsfiddle.net/D45mp/</a></p>