<div class="ss-component">
  <h1>Range</h1>
  <p>Single Range Buttons that define a range search</p>
  <div class="filter-button">
    <a
      fs-fields="dailyPrice"
      fs-lte="99"
      fs-gte="50"
      :class="{'active': rangeActive('filter4', '99')}"
      v-on:click="buttonRangeFilter( 'filter4', $event)"
    >$50 to $100</a>
  </div>
  <div class="filter-button">
    <a
      fs-fields="dailyPrice"
      fs-lte="150"
      fs-gte="100"
      :class="{'active': rangeActive('filter4', '150')}"
      v-on:click="buttonRangeFilter( 'filter4', $event)"
    >$100 to $150</a>
  </div>
</div>

/**
 * Submits a button filter search for a range
 *
 * @param {$event} event Accepts html event
 * @param {*} model filter1 - filter10 & must be unique
 */
buttonRangeFilter(model, event) 

/**
 * Set the class active if model value === lte
 *
 * @param {*} model to bind to
 * @param {*} check is an object to check for eg: {'gte': '500'} 
 * @returns
 */
rangeActive(model, check)