title: jQuery UI slider to show images on drag
body: <p>Need help on how to use this script to show images instead of values. I need 5 images to be shown when user drag handle. Like slideshow. Here is the slider code
  <a href="http://jqueryui.com/slider/#steps" rel="nofollow">http://jqueryui.com/slider/#steps</a>
  Also need to make fade effect on image swap.
  This is what i got so far: </p>
  
  <pre><code>$("#slider").slider({
  animate: true,
  min: 0,
  max: 500,
  step: 100,
  slide: function(event, ui) {
      if (ui.value == 100) {
          $('#green').hide();
      };
      if (ui.value == 200) {
          $('#green').hide();
          $('#red').show();
      };
       if (ui.value == 400) {
          $('#red').hide();
          $('#blue').show();
      };
  
      $("#hour").text(ui.value);
  }  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/LGMHP/182/" rel="nofollow">http://jsfiddle.net/LGMHP/182/</a>
  Help would be greatly appreciates.</p>