Custom Filter Age Slider

by Max Liashuk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.8/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.1.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.1.0/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<div id="vue" class="container">
    <div class="row" id="debug">
    Minimum: {{ minAge }}
    Maximum: {{ maxAge }}
    </div>

    <div class="row">
      <div class="col s6 m12 l12">
        <h5>Filter op leeftijd</h5>
        <div id="ageSlider"></div>
        <input type="hidden" id="minAge" v-model="minAge" />
        <input type="hidden" id="maxAge" v-model="maxAge" />
      </div>
    </div>
    <div class="row">
      <div class="col s6 m6 l3" v-for="profile in filteredProfiles | orderBy 'updated_at'">
          <div class="card z-depth-3">
            <div class="card-image">
              <img  :src="profile.photos[0].thumbnail_path" />
            </div>
            <div class="card-content card-content-homepage">
              <p>{{ profile.name }}</p>
            </div>
          </div>
      </div>
       
    </div>
  </div>

JavaScript

//creating the slider
	var slider = document.getElementById('ageSlider');
  	noUiSlider.create(slider, {
   		start: [18, 60],
	    connect: true,
   		step: 1,
   		range: {
     		'min': 18,
     		'max': 60
   		}
  	});
//onupdate set the hidden input + trigger a change so v-model gets update
	slider.noUiSlider.on('update', function(values) {
    	$("#minAge").val(values[0]).trigger('change');
    	$("#maxAge").val(values[1]).trigger('change');
  	});

//create a filter that shows or hides profiles based on the v-model values minAge & maxAge
	Vue.filter('ageRange', function (profiles) {
    	profiles.forEach(function(profile){
			//calculate age
       		var age = parseInt(moment(profile.birthdate).month(0).fromNow());
       		//verify the age versus the minAge and maxAge value
            //if in range show profile
            //if not in range hide profile
     });
     //return the profiles that can be showed?
     return profiles;
  });

  new Vue({
    el: "#vue",

    data: {
      profiles: [ 
          { 
              "id": "335", 
              "name": "Asha Schaefer", 
              "birthdate": "1974-10-16 00:00:00", 
              "photos": [ 
                  { 
                      "thumbnail_path": "https://placeimg.com/200/200/arch"
                  }
              ] 
          }, 
          { 
              "id": "336", 
              "name": "Garry Mayer",
              "birthdate": "1977-09-24 00:00:00", 
              "photos": [ 
                  { 
                      "thumbnail_path": "https://placeimg.com/200/200/food"
                  }
              ] 
          }, 
          { 
              "id": "337", 
              "name": "Isobel Bogisich", 
              "birthdate": "1988-06-11 00:00:00", 
              "photos": [ 
                  { 
                      "thumbnail_path": "https://placeimg.com/200/200/animals"
                  }
              ] 
          }, 
          { 
              "id": "338", 
            ...