Add or remove class on elements with range slider

Question

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:

http://codepen.io/anon/pen/OXPvZO

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.

Here's the JS that I'm using to handle what's there now:

jQuery( function( $ ) {
    var personCount = 12;

    for ( i = 0; i < personCount; i++ ) {
        $( '.person-count' ).append( '<span class="person person-' + i + '" />' );
    };

    $( '[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' );
    });
});

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.

If anyone has any suggestions or methods I could use here, I would be hugely appreciative.

Answer 1

The reason it skips is because you are missing 9 and 11 in data-slider-count. Because you used a loop to generate your elements it can't find elements with class '.person-11' or '.person-9' in the changed event.

You can get the actual values from data-slider-count as per the code below and use them to generate span elements which will be found based on data.count.

jQuery(function($) {

  //get values from slider
  var personCounts = $('.slider-input').attr('data-slider-count').split(',');

  //Create span elements based on values and not count
  for (i = 0; i < personCounts.length; i++) {
    $('.person-count').append('<span class="person person-' + personCounts[i] + '" />');
  };

  //these two should be active based on the default value of the slider
  $('.person-1').addClass('is-active');
  $('.person-2').addClass('is-active');

  $('[data-slider]').on('slider:ready slider:changed', function(event, data) {
    $('.person-integer').html(data.count);
    $('.js-price').html(data.value);
    $('.person-' + data.count).addClass('is-active');
  });
});