title: jQuery show / hide elements based on *multiple* jQuery UI sliders
body: <p>I'm trying to create an airline style time filter.</p>
  
  <p>I have a series of 'badges', each with a series of times in seconds:</p>
  
  <pre><code>&lt;div id="block732914299" class="pull-left" data-departuretime1="1340" data-departuretime0="865" data-arrivaltime0="980" data-arrivaltime1="10"&gt;
  </code></pre>
  
  <p>Now I want to use the jQuery UI sliders to show/hide various badges based on these times.</p>
  
  <p>I have one working.</p>
  
  <pre><code>$(".slider-range1").slider({
      range: true,
      min: mintime,
      max: maxtime,
      step: steptime,
      values: [mintime, maxtime],
  
      slide: function (e, ui) {
          var time2 = moment().startOf('day').add('m', ui.values[0]).format('h:mma');
          var time3 = moment().startOf('day').add('m', ui.values[1]).format('h:mma');
          $('.slider-time2').html(time2);
          $('.slider-time3').html(time3);
  
          // show or hide badges based on attr for each badge
          $('div[id^="block"]').each(function(e){
              if($(this).data('arrivaltime0') &gt;= ui.values[0] &amp;&amp; $(this).data('arrivaltime0') &lt;= ui.values[1]){
                  $(this).show();
              } else {
                  $(this).hide()
              }
          });
      }
  }); // slider-range1
  </code></pre>
  
  <p>But I'm a bit stuck when I add the second slider because now they are conflicting. When I alter one slider it overrides the other.</p>
  
  <p>Digging through the jQuery docs I'm looking at .filter - but I'm not sure how best to proceed using that.</p>
  
  <p>I can probably write a bunch of ugly if/else statements to check all the permutations but it seems like there should be a more efficient way to do this?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/thecrumb/FB4Sv/27/" rel="nofollow">http://jsfiddle.net/thecrumb/FB4Sv/27/</a></p>
  
  <p>Use/test case:</p>
  
  <ul>
  <li>Set departure slider to 7-9AM - Badge A and B should display (8am)</li>
  <li>Without changing first slider, set arrival slider to 7-9PM - Badge C should display (8pm)</li>
  <li>At this point Badges A, B AND C should be displayed. </li>
  <li>D should still be hidden.</li>
  </ul>
  
  <p>Still stuck with this :(</p>