Filtering between range of two dropdown field values with jQuery

[benyates1]

I have two drop down menus (min age and max age). I can filter on both them but individually but what I want to be able to do is only show the divs whose data-age attribute is equal or within the range of both values (21 to 26 for example would return 22 etc but not 20 or 27).

Code for existing filter:

<div class="col-xs-6">
                        <div class="form-group">
                            <label class="filter-col" style="margin-right:0;" for="pref-perpage">Min Age</label>
                            <select id="age-min" class="form-control">
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                            </select>                                
                        </div> <!-- form group [rows] -->
                        </div>

                        <div class="col-xs-6">
                        <div class="form-group">
                            <label class="filter-col" style="margin-right:0;" for="pref-perpage">Max Age</label>
                            <select id="pref-perpage" class="form-control">
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                            </select>                                
                        </div> <!-- form group [rows] -->
                        </div>

<script type="text/javascript">
                          $("#age-min").change(function(){
                              if (this.value === 'all') {
                                $("div[data-age]").show();
                              } else {
                                $("div[data-age]").hide();
                                $("div[data-age=" + this.value +"]").show();
                              }
                            });
                        </script>