title: combining multiple jquery filters (UI slider, checkbox)
body: <p>I want a page where I will display a bunch of div's, the div's will be displayed is based on selections made on the page.</p>
  
  <p>Here i'm using two types of filters i.e., <strong>jQuery ui slider(price range)</strong> and <strong>checkbox</strong></p>
  
  <p>Both are working fine separately, but i want to combine both</p>
  
  <p>I'm unable to find a trick that which combines both the filters</p>
  
  <p><strong>Fiddle:</strong> <a href="http://jsfiddle.net/bZmJ8/11/" rel="nofollow">Working Demo</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="slider-container"&gt;
   &lt;p&gt;
    &lt;input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;ul id="filters"&gt;
      &lt;li&gt;
          &lt;input type="checkbox" value="categorya" id="filter-categorya" /&gt;
          &lt;label for="filter-categorya"&gt;Category A&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="checkbox" value="categoryb" id="filter-categoryb" /&gt;
          &lt;label for="filter-categoryb"&gt;Category B&lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;hr&gt;
      &lt;h3&gt;Results&lt;/h3&gt;
  &lt;div id="computers"&gt;
      &lt;div class="system categorya categoryb" data-price="299"&gt;A, B -  299&lt;/div&gt;
      &lt;div class="system categorya" data-price="599"&gt;A -  599&lt;/div&gt;
      &lt;div class="system categoryb" data-price="1099"&gt;B -  1099&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="slider-range"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code> $(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-container" ).slider( "values", 0 ) +
        " - $" + $( "#slider-container" ).slider( "values", 1 ) );
    });
  
  function filterSystem(minPrice, maxPrice) {
      $("#computers div.system").hide().filter(function() {
          var price = parseInt($(this).data("price"), 10);
          return price &gt;= minPrice &amp;&amp; price &lt;= maxPrice;
      }).show();
  }
  
  $("#filters :checkbox").click(function() {
      $("#computers div.system").hide();
      $("#filters :checkbox:checked").each(function() {
          $("." + $(this).val()).show();
      });
  });
  </code></pre>
  
  <p>Can anyone help me to combine these two filters.</p>
  
  <p>Thanks in Advance, sorry for my poor english</p>