title: How to grab the values from a slider with jquery
body: <p>I have a slider that I grabbed from Codepen.io
  here is the link to the slider I am using</p>
  
  <p><a href="https://codepen.io/dpdknl/pen/QggQRq" rel="nofollow noreferrer">https://codepen.io/dpdknl/pen/QggQRq</a></p>
  
  <p>I want to grab the values of what the slider is displaying in the span so I can pass it to my jquery function. How could I grab that value? I am using an onchange event to send the value to the jquery function.</p>
  
  <pre><code>&lt;div class="range" data-labels='["All", "18 - 21","22 - 29","30 - 39","40 - 49","50+"]'&gt;
      &lt;input name="range" type="range" id="rangeAge" min="0" step="1" max="100" value="0"&gt;
      &lt;div class="range-output"&gt;
          &lt;output class="output" name="output" for="range"&gt;&lt;span&gt;&lt;/span&gt;&lt;/output&gt;
      &lt;/div&gt;
      &lt;div class="label-container"&gt;
          &lt;div class="left-label" style="display:none;"&gt;&lt;/div&gt;
          &lt;div class="right-label" style="display:none;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then I tried to grab them with this...</p>
  
  <pre><code>    $('#rangeAge').on('slidechange', function(){        
          var min = $('#rangeAge').slider().value();  
          alert(min);
      });
  </code></pre>
  
  <p>Thanks for any and all help.</p>
  
  <p>Fiddle of current code</p>
  
  <p><a href="https://jsfiddle.net/NoJqueryMaster/d45envbu/3/" rel="nofollow noreferrer">https://jsfiddle.net/NoJqueryMaster/d45envbu/3/</a></p>