title: Jquery Ui range-slider content show on step
body: <p>I have a problem showing content based on the current step of jQuery UI range slider, for example on second step I need only show second-step-content</p>
  
  <p><a href="http://codepen.io/anon/pen/LNoXqX" rel="nofollow">http://codepen.io/anon/pen/LNoXqX</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span class="becky"&gt;first-step&lt;/span&gt;
  &lt;span class="becky"&gt;second-step&lt;/span&gt;
  &lt;span class="becky"&gt;third-step&lt;/span&gt;
  &lt;span class="becky"&gt;fourth-step&lt;/span&gt;
  &lt;span class="becky"&gt;fifth-step&lt;/span&gt;
  
  &lt;div id="slider-2"&gt;&lt;/div&gt;
  
   &lt;!-- Content that I need show --&gt;
   &lt;span id="first-step-content"&gt;first-step-content&lt;/span&gt; 
   &lt;span id="second-step-content"&gt;econd-step-content&lt;/span&gt;
   &lt;span id="third-step-content"&gt;third-step-content&lt;/span&gt; 
   &lt;span id="fourth-step-content"&gt;fourth-step-conten&lt;/span&gt;
   &lt;span id="fifth-step-content"&gt;fifth-step-content&lt;/span&gt;  
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>$(function() {
      $( "#slider-2" ).slider({
          min: 4,
          max: 20,
          value: 12,
          step: 4,
          animate:"slow",
          orientation: "horizontal"
      });
   });
  </code></pre>