Isotope multiple filter with checkboxes and rangeSlider

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="https://rawgit.com/leongersen/noUiSlider/master/distribute/nouislider.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/leongersen/noUiSlider/master/distribute/nouislider.min.css">
<h3>Вес</h3>

<div id="weight-slider" class="weight-slider"></div>
<p> <span class="weight-from"></span>-<span class="weight-to"></span>

</p>
 <h3>Размер</h3>

<div id="size-slider" class="size-slider"></div>
<p> <span class="size-from"></span>-<span class="size-to"></span>

</p>
 <h3>Тип</h3>

<div id="options">
    <div class="option-set" data-group="color">
        <input type="checkbox" value="" id="color-all" class="all" checked />
        <label for="color-all">all brands</label>
        <input type="checkbox" value=".green" id="green" />
        <label for="green">green</label>
        <input type="checkbox" value=".red" id="red" />
        <label for="red">red</label>
        <input type="checkbox" value=".blue" id="blue" />
        <label for="blue">blue</label>
    </div>
    <div class="option-set" data-group="type">
        <input type="checkbox" value="" id="type-all" class="all" checked />
        <label for="type-all">all types</label>
        <input type="checkbox" value=".rounded" id="rounded" />
        <label for="rounded">rounded</label>
        <input type="checkbox" value=".square" id="square" />
        <label for="square">square</label>
    </div>
</div>
<div class="grid">
    <div class="grid-item red rounded">
        <p class="weight">21</p>
        <p class="size">1b</p>
    </div>
    <div class="grid-item red square">
        <p class="weight">24</p>
        <p class="size">1a</p>
    </div>
    <div class="grid-item green rounded">
        <p class="weight">25</p>
        <p class="size">2b</p>
    </div>
    <div class="grid-item blue rounded">
        <p class="weight">26</p>
        <p class="size">1c</p>
    </div>
   ...

SCSS

.grid {
  margin-top: 50px;
}

.grid-item {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid #E14D38;
  background: #E14D38;
  margin-bottom: 15px;
  
  &.green {
    border-color: #068B32;
    background: #068B32;
  }
  &.blue {
    border-color: #176DEE;
    background: #176DEE;
  }
  &.rounded {
    border-radius: 50%;
  }

  .weight,
  .size {
    position: absolute;
    width: 30%;
    padding: 15% 0;
    margin: 0;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    font: bold 12px/0 Arial;
  }

  .weight {
    top: 0;
    left: 0;
    background: #595959;
    color: #fff;
  }

  .size {
    bottom: 0;
    right: 0;
    width: 40%;
    padding: 20% 0;
    background: #FFBA04;
  }
}

.weight-from,
.weight-to,
.size-from,
.size-to {
  display: inline-block;
  width: 30px;
  border-radius: 50%;
  line-height: 0;
  padding: 15px 0;
  text-align: center;
}

.weight-from,
.weight-to {
  background: #595959;
  color: #fff;
}
.size-from,
.size-to {
  background: #FFBA04;
  color: #000;
}

.weight-slider {
  .noUi-connect {
    background: #595959;
    
  }
}

.size-slider {
  .noUi-connect {
    background: #FFBA04;
    
  }
}

.noUi-handle {
  border-color: #BCBCBC;
  &:before,
  &:after {
    background: #BCBCBC;
  }
}

JavaScript

$(function () {
    var $container = $('.grid'),
        weightSlider = document.getElementById('weight-slider'),
        sizeSlider = document.getElementById('size-slider'),
        $weightFrom = $('.weight-from'),
        $weightTo = $('.weight-to'),
        $sizeFrom = $('.size-from'),
        $sizeTo = $('.size-to'),
        sizeArray = ['1a', '1b', '1c', '1d', '2a', '2b', '2c', '2d', '3a', '3b'],
        filters = {},
        comboFilter;

    noUiSlider.create(weightSlider, {
        start: [23, 27],
        connect: true,
        step: 1,
        range: {
            'min': 15,
            'max': 30
        }
    });
    
    noUiSlider.create(sizeSlider, {
        start: [0, 9],
        step: 1,
        connect: true,
        range: {
            'min': 0,
            'max': 9
        }
    });

    weightSlider.noUiSlider.on('update', function (values, handle) {
        (handle ? $weightTo : $weightFrom).text(parseInt(values[handle]));
        $container.isotope({
            filter: multipleFilter
        });
    });

    sizeSlider.noUiSlider.on('update', function (values, handle) {
        (handle ? $sizeTo : $sizeFrom).text(sizeArray[+values[handle]]);
        $container.isotope({
            filter: multipleFilter
        });
    });

    $container.isotope({
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: '.grid-item',
            gutter: 15
        },
        filter: multipleFilter
    });

    // do stuff when checkbox change
    $('#options').on('change', function (jQEvent) {
        var $checkbox = $(jQEvent.target);
        manageCheckbox($checkbox);
        comboFilter = getComboFilter(filters);
        $container.isotope({
            filter: multipleFilter
        });
    });

    function multipleFilter() {
        var that = this;

        function checkWeight() {
            var weight = $(that).find('.weight').text();
            weightFrom = parseInt($weightFrom.text()) || 0;
            weightTo =...