not able to configure numberRange filter code

[sanchig]

I want to search number in range for age and price columns. (Ex. filter from 50 to 60 age ). I have used dateRange filter code for reference but it doesn't work. I tried to check the dependency of dateRange but there is no any other dependency (except bootstrap3 and datepicker Js file because these files using for date picker popup). I can't find why below code doesn't work. it is not showing even textboxes.

  numberRange: {
    separator: '~',
    /**
     * Build the form DOM elements
     *
     * @param {type} th The th element where to put the elements
     *
     * @returns {jQuery}
     */
    dom: function(th){
      var self = this;

      self.elements = $('<input>', {
        type: 'text'
      }).add($('<input>', {
          type: 'text'
      })).appendTo(th);

      if (typeof self.options.width !== 'undefined') {
        self.elements.css('width', self.options.width);
      } else {
        self.elements.css('width', '50%');
      }

      return self.elements;
    },
    /**
     * Binds event to the DOM elements
     *
     * @returns {void}
     */
    bindEvents: function(){
      var self = this;

      self.elements.change(function(){
        self.search();
      });
    },
    /**
     * Return the searched string
     *
     * @returns {string}
     */
    request: function(){
      var
        self = this,
        request = []
      ;

      self.elements.each(function(){
        request.push($(this).val());
      });

      return request.join(self.options.separator);
    }
  }

//At the datatables configuration 3 : { "type" : "numberRange"},

And I found this error in my console. (i have solved it in my fronted code but this for the reference if any bug.)

dataTables.lcf.datepicker.fr.js :- line 15 Uncaught TypeError: Cannot set property 'format' of undefined

[thansen-solire]

This should work

(function(window, document) {
  var factory = function($, ColumnFilter) {
    'use strict';

    ColumnFilter.filter.numberRange = {
      separator: '~',
      dom: function(th) {
        var self = this;

        self.elements = $('<input>', {
          type: 'number'
        }).add($('<input>', {
          type: 'number'
        })).appendTo(th);

        if (typeof self.options.width !== 'undefined') {
            self.elements.css('width', self.options.width);
        } else {
            self.elements.css('width', '50%');
        }
        return self.elements;
      },
      bindEvents: function(){
        var self = this;

        self.elements.on('change', function(){
          self.search();
        });
      },
      format: function(value){
        return value;
      },
      request: function(){
        var
          self = this,
          search = []
        ;

        self.elements.each(function(){
          var value = $(this).val();
          value = self.options.format(value);
          search.push(value);
        });

        return search.join(self.options.separator);
      }
    };
  };

  // Define as an AMD module if possible
  if (typeof define === 'function' && define.amd) {
    define(['jquery', 'datatables-light-columnfilter'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
    factory(require('jquery'), require('datatables-light-columnfilter'));
  } else if (jQuery) {
    // Otherwise simply initialise as normal, stopping multiple evaluation
    factory(jQuery, jQuery.fn.dataTable.ColumnFilter);
  }
})(window, document);