How to create column filtering with value brackets in a data table?

See more:

jQuery

jQuery-UI

I have a column for percentage completion in my table and I have column filtering available on it of type 'select'. I want my drop down filter to display a static list of brackets (like <20%, 20-60% and >60%). So that when a user selects that filter option the data table only displays those rows.
Her is my code till now:

 $(document).ready(function() {
  $('#OpptyTable').DataTable({
    "sDom":"ltipr" ,
    "pageLength": 25,    
    initComplete: function() {
      this.api().columns([1,2,3]).every(function() {
        var column = this;
        var select = $('<select><option value=""></option></select>')
          .appendTo($(column.footer()).empty())
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

        column.data().unique().sort().each(function(d, j) {
          select.append('<option >' + d + '</option>');
        });
      });

      this.api().columns([0]).every(function() {
        var that = this;
        var input = $('<input type="text" placeholder="Search" />')
          .appendTo($(this.footer()).empty())

          .on('keyup change', function() {
            if (that.search() !== this.value) {
              that
                .search(this.value)
                .draw();
            }
          });
      });
      var r = $('#OpptyTable tfoot .filterAvailable');
  r.find('th').each(function(){
    $(this).css('padding', 8);
  });
  $('#OpptyTable thead').prepend(r);
  $('#search_0').css('text-align', 'center');
    }
  });
});

What I have tried:

Code mentioned in the problem description