title: Add or remove class on elements with range slider
body: <p>I have a script using a range slider that changes a price value and person count based on the position of the slider. The usage is for pricing for office space based on how many people. Here's the working example here in this pen:</p>
  
  <p><a href="http://codepen.io/anon/pen/OXPvZO" rel="nofollow">http://codepen.io/anon/pen/OXPvZO</a></p>
  
  <p>With the slider, there's people icons (black blocks in the example) that are intended to highlight with an active class depending on the count. So when you slide through, the active class would apply to the proper count of icons or remove depending on slide direction. I'm having trouble determining a method to handle this type of action.</p>
  
  <p>Here's the JS that I'm using to handle what's there now:</p>
  
  <pre><code>jQuery( function( $ ) {
      var personCount = 12;
  
      for ( i = 0; i &lt; personCount; i++ ) {
          $( '.person-count' ).append( '&lt;span class="person person-' + i + '" /&gt;' );
      };
  
      $( '[data-slider]' ).on( 'slider:ready slider:changed', function( event, data ) {
          $( this ).parents( '.price-slider' )
              .find( '.person-integer' ).html( data.count ).end()
              .find( '.js-price' ).html( data.value ).end()
              .find( '.person-' + data.count ).addClass( 'is-active' );
      });
  });
  </code></pre>
  
  <p>The one thing to note (as seen in the HTML in the Codepen), is the data count skips two after 8. So goes from 8 to 10 to 12. That seems to throw off the methods I've tried previously.</p>
  
  <p>If anyone has any suggestions or methods I could use here, I would be hugely appreciative.</p>