Input change example

components.container-component.js

import Ember from 'ember';

export default Ember.Component.extend({

});

components.input-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  didReceiveAttrs({ newAttrs: { value }}) {
		if (value) {
      const v = value.value || value;
   	  this.set('_internalValue', v); 
    }
  },
  
  modifyInput(value) {
    return 15;
  },
  
 	_internalValue: Ember.computed('value', {
    get(key) {
    	return this.get('value');
    },
    set(key, value) {
    	return this.get('value');
    }
  }),
  
  actions: {
   	inputChanged({ target }) {
      let value = target.value;
      console.log(value);  
      value = this.modifyInput(value);
      this.attrs.inputChanged(value);
      target.value = value;
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{container-component}}
<br>
<br>

templates.components.container-component.hbs

Container value: {{value}}

{{input-component
	value=(readonly value)
  inputChanged=(action (mut value))
}}

templates.components.input-component.hbs

Input value: {{value}}
<br/>
Input internal value: {{_internalValue}}
<br/>
<input value={{_internalValue}} oninput={{action 'inputChanged'}}>

twiddle.json

{
  "version": "0.10.5",
  "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.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}