根据jquery UI范围滑块的值向div添加/删除类

Question

这里我有一堆div的

<div id="computers">
    <div class="system" data-price="299">div1 -  299</div>
    <div class="system" data-price="599">div2 -  599</div>
    <div class="system" data-price="1099">div3 -  1099</div>
</div>

我正在使用jQuery UI滑块，并尝试根据滑块最小值和最大值显示/隐藏'div.system'。

我使用了以下脚本

  $(function() {
        $('#slider-container').slider({
            range: true,
            min: 299,
            max: 1099,
            values: [ 299, 1099 ],
            slide: function(event, ui) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                var mi = ui.values[ 0 ];
                var mx = ui.values[ 1 ];
                filterSystem(mi, mx);
            }
        });
      $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });

function filterSystem(minPrice, maxPrice) {
    $("#computers div.system").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

我没有任何错误就这样做了。

但是我想要toggleClass（添加/删除类）而不是hide / show'div.system'。

我怎么能这样做，我试过但我没有

谁能帮助我吗？这是DEMO FIDDLE

先谢谢