valid-number-input

components.my-input.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'input',
  type:'text',
  attributeBindings:['type','value'],
  
  value:Ember.computed('innerValue',{
    get:function(key){
      return this.sanitize(this.get('innerValue'));
    },
    set:function (key, value){
      let sanitized = this.sanitize(value);
      if(!sanitized){
        return this.get('innerValue');
      }
      this.set('innerValue', sanitized);
      return sanitized;
    }
  }),
  
  keyUp:function(){
    let sanitizedValue = this.sanitize(this.$().val());
    if(!sanitizedValue){
      this.$().val(this.get('value'));
      return false;
    }    
  },
  
  sanitize:function(val){
    if (Ember.isPresent(val)) {
      let num =  Number(val);
      if(!Number.isNaN(num)){
          return num;
      }
    }
    return null;
  },
  
  input:function(){
    this.update.bind(this)();
  },
  change:function(){
    this.update.bind(this)();
  },
  update:function(){
    let val = this.$().val();
    this.set('value',val);
    (this.get('onUpdate')||Ember.K)(this.get('value'));
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  x:20,
  y:0,
  
  actions:{
    myUpdate:function(newValue){
      this.set('y',newValue);
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

x: {{x}} <br>
y: {{y}} <br>

<br>

{{my-input onUpdate=(action 'myUpdate') }}

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}