title: jQuery slider's handle doesn't slide
body: <p>I'm trying to setup a simple slider with custom design but the handle of slider doesn't work. I think I missed something easy cuz I'm pretty sleepy. I'd glad if you can take a look at the sample code;</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt;
  
          &lt;style type="text/css" rel="stylesheet"&gt;
              body { background-color: green; }
  
              #slider {
                  float: left;
                  width: 19px; height: 338px;
                  background-image: url('images/bg_scroller.png');
                  background-position: center center;
                  background-repeat: no-repeat;
              }
  
              #slider-handle {
                  position: absolute; cursor: pointer;
                  width: 19px; height: 31px;
                  background-image: url('images/scroller.png');
                  background-position: center center;
                  background-repeat: no-repeat;
              }
          &lt;/style&gt;
  
          &lt;script type="text/javascript"&gt;
              $(document).ready(function(){
                  $('#slider').slider({
                      orientation: "vertical",
                      min: 0,
                      max: 100,
                      handle: '#slider-handle',
                      stop: function (event, ui) {
                          console.log("stop",ui)
                          //ul.animate({'left' : ui.value * -1}, 500);
                      },
                      slide: function (event, ui) {
                          console.log("slide",ui)
                          //ul.css('left', ui.value * -1);
                      }
                  });
              });
          &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div id="slider"&gt;
              &lt;div id="slider-handle"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Sample code is placed also here; <a href="http://www.zpnd.com/sak/slider.php" rel="nofollow">http://www.zpnd.com/sak/slider.php</a></p>