Setting up reactive table custom filter

help
1

I have this problem with my code.I have this template code

<template name="Login">

  <div class="login">
  <div class="page-header">
    <h2>Login</h2>
    <input type="text" class="greater-than-filter-input" id="greater-than-filter" label="Filter"  />

    
      </div>
      {{> reactiveTable collection=tables settings=tableSettings}}
    <form>

        <div class="form-group">

            <label for="inputEmail">Email</label>

            <input type="email" class="form-control" id="inputEmail" placeholder="Email">

        </div>

        <div class="form-group">

            <label for="inputPassword">Password</label>

            <input type="password" class="form-control" id="inputPassword" placeholder="Password">

        </div>
        
        <div class="form-group">


            <a class="pull-right" href="">Forgot Password</a>

        </div>

        <button type="submit" class="btn btn-primary">Login</button>

    </form>
  </div>
</template>

and the js for that template

/*****************************************************************************/
/* Login: Event Handlers */
/*****************************************************************************/

Template.Login.created = function () {
  this.filter = new ReactiveTable.Filter('greater-than-filter', ['number']);
};

Template.Login.events({
   "keyup .greater-than-filter-input, input .greater-than-filter-input": function (event, template) {
      var input = parseInt($(event.target).val(), 10);
      if (!_.isNaN(input)) {
        template.filter.set({'$gt': input});
      } else {
        template.filter.set("");
      }
   }
});


/*****************************************************************************/
/* Login: Helpers */
/*****************************************************************************/
Template.Login.helpers({
});

/*****************************************************************************/
/* Login: Lifecycle Hooks */
/*****************************************************************************/
Template.Login.onCreated(function () {
});

Template.Login.onRendered(function () {
});

Template.Login.onDestroyed(function () {
});


Template.Login.tables = function () {
    return Crud.find();
}

Template.Login.tableSettings = function () {
    return {
        rowsPerPage: 5,
        showFilter: true,
        filters: ['greater-than-filter'],
        showNavigation: 'auto',
        fields: [
            { key: '_id', label: 'Id' },
            { key: 'name', label: 'Name' },
            { key: 'type', label: 'Type' },
            { key: 'number', label: 'Number' }
        ],
        useFontAwesome: true,
        group: 'client'
    };
}

When i use this code {{> reactiveTableFilter id="greater-than-filter" label="Filter" }}

i can set up a custom filter.The problem is,i need a filter that is a dropdown and not a text input.

I tried this <input type="text" class="greater-than-filter-input" id="greater-than-filter" /> it filters but not correctly. How can i change the custom filter to be a drop down select menu?.