How to override a parent property in ember.js?

I want to write a new component that extends Ember Input as number input. When users of this class binds their values to value property of number-input-component, they should only get a number (or NaN for invalid values). In Ember Input, value has an attribute binding.

I've defined a computed property named "value" on number-input-component as following:

value:Ember.computed({
    get:function(key){
       let htmlValue = this.get('htmlvalue');
       return this.sanitize(htmlValue);
    },
    set:function (key, htmlvalue){
       this.set('htmlvalue', htmlvalue);

       if(this.get('onUpdate')) {
          this.get('onUpdate')(this.sanitize(htmlvalue));
       }
       return this.sanitize(htmlvalue);
    }
}),

It works as expected but it's not working in two-way binding. (Actually it is ok for DDAU. But it should work in two-way bindings.)

Note: I know that I can supply another property such as "numericValue" (shown as here) so that users can bind their values to "numericValue". But I don't want to confuse users with both value and numericValue.