<div id="app">
  <div class="section">
    <div class="container">
      <div class="columns">
        <div class="column"><input type="date" name="date" placeholder="Date" class="date" /></div>
        <div class="column">
          <div id="slider" /></div>
      </div>
    </div>
  </div>
  
  <p></p>
  
    
  </div>
</div>

new Vue({
  el: '#app',
  data(){
    return {
      
    }
  },
  mounted(){
    flatpickr(".date", {
      minDate: 'today'
    });
    
    flatpickr(".time", {
      enableTime: true,
      noCalendar: true,
      minuteIncrement: 15,
      dateFormat: "h:i K",
      mode: "range"
    });
    
    var slider = document.getElementById('slider');
    noUiSlider.create(slider, {
      start: [480, 1020],
      connect: true,
      step: 15,
      tooltips: [ true, true],
      range: {
        'min': 0,
        'max': 1439
      },
      pips: {
		    mode: 'steps',
        //values: [0, 720, 1439],
        filter: function(value, type){
          console.log(type, value, value % 60);
          return (value % (60 * 4) === 0) ? 1 : (value % 60 === 0) ? 2 : 0;
        },
        //density: 2,
        format: {
          to: function ( value ) {
            if (value % (60 * 4) === 0) { 
            return moment().startOf('day').add(value, 'minutes').format('hh:mm A');
            }
            return '';
          },
          from: function ( value ) {
            return value;
          }
        }
	    },
      format: {
        to: function ( value ) {
          //return value + ',-';
          return moment().startOf('day').add(value, 'minutes').format('hh:mm A');
        },
        from: function ( value ) {
          return value;
        }
      }
    });
  }
});