title: Filter a list using min and max values
body: <p>Im using list.js and i've looked at the api which can be found <a href="http://listjs.com/api" rel="nofollow noreferrer">here</a>. I still can't figure out how to get my min and max price filters to only displays results if they fit between the two ranges.</p>
  
  <p>This is what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var options = {
      valueNames: ['category', 'price']
  };
  
  var featureList = new List('piece-search', options);
  
  $('#filter-red').click(function() {
      featureList.filter(function(item) {
          if (item.values().category == "Red") {
              return true;
          } else {
              return false;
          }
      });
      return false;
  });
  
  $('#filter-blue').click(function() {
      featureList.filter(function(item) {
          if (item.values().category == "Blue") {
              return true;
          } else {
              return false;
          }
      });
      return false;
  }); 
      
  $('#filter-none').click(function() {
      featureList.filter();
      return false;
  }); 
      
  $('#minPrice').on('change keydown paste input click', function(){
  var minPrice = $('#minPrice').val();
      featureList.filter(function(item) {
          if (item.values().price &gt;= minPrice) {
              return true;
          } else {
              return false;
          }
      });
      return false;
  });  
      
  $('#maxPrice').on('change keydown paste input click', function(){
  var maxPrice = $('#maxPrice').val();
      featureList.filter(function(item) {
          if (item.values().price &lt;= maxPrice) {
              return true;
          } else {
              return false;
          }
      });
  }); </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.item {
      margin: 0.5em;
      padding: 0.5em;
      width: 40px;
      height: 40px;
      float: left;
      color: white;
  }
  
  .item p {
      margin: 0;
      padding: 0;
  }
  
  .filter {
    cursor: pointer;
    }
  }
  
  .sort.btn {
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="piece-search"&gt;
  
      &lt;ul class="sort-by"&gt;
          &lt;li&gt;
              &lt;input class="search" placeholder="Search..."&gt;
              &lt;input type="number" placeholder="min price" id="minPrice"/&gt;
              &lt;input type="number" placeholder="max price" id="maxPrice"/&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class="filter"&gt;
          &lt;li class="btn" id="filter-none"&gt;Show all&lt;/li&gt;
          &lt;li class="btn" id="filter-red" value="category"&gt;Only show red divs&lt;/li&gt;
          &lt;li class="btn" id="filter-blue" value="category"&gt;Only show blue divs&lt;/li&gt;
      &lt;/ul&gt;
                      
      &lt;ul class="list"&gt;
  
          &lt;li class="item" style="background: blue"&gt;
              &lt;p class="category"&gt;Blue&lt;/p&gt;
              &lt;p class="price"&gt;14&lt;/p&gt;
          &lt;/li&gt;
  
          &lt;li class="item" style="background: red"&gt;
              &lt;p class="category"&gt;Red&lt;/p&gt;
              &lt;p class="price"&gt;37&lt;/p&gt;
          &lt;/li&gt;
                          
          &lt;li class="item" style="background: blue"&gt;
              &lt;p class="category"&gt;Blue&lt;/p&gt;
              &lt;p class="price"&gt;22&lt;/p&gt;
          &lt;/li&gt;
                          
          &lt;li class="item" style="background: blue"&gt;
              &lt;p class="category"&gt;Blue&lt;/p&gt;
              &lt;p class="price"&gt;58&lt;/p&gt;
          &lt;/li&gt;
          
          &lt;li class="item" style="background: red"&gt;
              &lt;p class="category"&gt;Red&lt;/p&gt;
              &lt;p class="price"&gt;45&lt;/p&gt;
          &lt;/li&gt;
       &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>