title: rangeslider.js - not pulling correct value number in jquery
body: <p>I'm using <code>rangeslider.js</code> to hide or show images based on whether the value sits within a bucket ( at this point; above or below 1500 ) and I'm getting a weird response. </p>
  
  <p>My slider is set up like this:</p>
  
  <pre><code>&lt;input id="sliderone" 
      type="range"
      min="0"       // default 0
      max="3000"    // default 100
      step="1"      // default 1
      value="300"   // default min + (max-min)/2
  &gt;
  </code></pre>
  
  <p>My javascript is like this</p>
  
  <pre><code>var sliders = document.querySelectorAll('input[type=range]');
  var result  = document.getElementById('js-result');
  var values  = getValues(sliders);
  
  $(sliders).rangeslider({
      polyfill: false
  }).on('change', function() {
      var values = getValues(sliders);
      updateResult(result, values);
      console.log(values);
  });
  
  $(sliders).rangeslider({
      polyfill: false
  }).on('change', function() {
      var values = getValues(sliders);
      updateResult(result, values);
      console.log(values);
  });
  
  updateResult(result, values);
  
  function newchangepic1() {
      var newvalue = values[0];
      console.log(newvalue);
  
      if (newvalue &lt; 1500) {
            $(".img-one").attr("src","images/travel.png");
      } else if ( newvalue &gt; 1500) {
            $(".img-one").attr("src","images/plant-color.png");
      }
  }
  
  function newchangepic3() {
      var newvalue = values[1];
      console.log(newvalue);
  
      if (newvalue &lt; 1500) {
          $(".img-two").attr("src","images/hdb.png");
      } else if ( newvalue &gt; 1500) {
          $(".img-two").attr("src","images/plane.png");
      }
  }
  </code></pre>
  
  <p>When I do </p>
  
  <pre><code>console.log(values);
  </code></pre>
  
  <p>It prints my array as expected, updating with each movement.</p>
  
  <pre><code>var newvalue = values[0];
  console.log(newvalue);
  </code></pre>
  
  <p>But when I try to read one of the values inside of the array I get 300. the initial value I set in HTML. </p>
  
  <p><a href="https://i.stack.imgur.com/B4hCW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B4hCW.png" alt="Array results - 300"></a>
  I can't get my head around why this is happening but I'm a bad at coding, so am probably missing something. </p>
  
  <p>Any help?</p>