diff --git a/examples/routers/input-number.vue b/examples/routers/input-number.vue
index db65699..e5bad09 100644
--- a/examples/routers/input-number.vue
+++ b/examples/routers/input-number.vue
@@ -1,39 +1,66 @@
+<!--<template>-->
+    <!--<div>-->
+        <!--&lt;!&ndash;<Input-number :max="max" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>&ndash;&gt;-->
+        <!--&lt;!&ndash;{{ v1 }}&ndash;&gt;-->
+        <!--&lt;!&ndash;<div @click="c">change v1</div>&ndash;&gt;-->
+        <!--&lt;!&ndash;<div @click="changeMax">change max</div>&ndash;&gt;-->
+        <!--&lt;!&ndash;<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>&ndash;&gt;-->
+        <!--&lt;!&ndash;<Input-number :max="10" :min="1" v-model="obj.v"></Input-number>&ndash;&gt;-->
+        <!--<InputNumber :editable="false" :max="10" :min="1" :step="1.2" v-model="value2"></InputNumber>-->
+        <!--<InputNumber :precision="1" :max="10" :min="1" :step="0.1" v-model="value1"></InputNumber>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--props: {},-->
+        <!--data () {-->
+            <!--return {-->
+                <!--v1: 1,-->
+                <!--v2: 1,-->
+                <!--max: 10,-->
+                <!--autofocus: true,-->
+                <!--obj: {-->
+
+                <!--},-->
+                <!--value1: 1.0,-->
+                <!--value2: 1-->
+            <!--};-->
+        <!--},-->
+        <!--computed: {},-->
+        <!--methods: {-->
+            <!--c () {-->
+                <!--this.v1 = 5;-->
+            <!--},-->
+            <!--changeMax () {-->
+                <!--this.max++;-->
+            <!--}-->
+        <!--}-->
+    <!--};-->
+<!--</script>-->
+
+
 <template>
     <div>
-        <!--<Input-number :max="max" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>-->
-        <!--{{ v1 }}-->
-        <!--<div @click="c">change v1</div>-->
-        <!--<div @click="changeMax">change max</div>-->
-        <!--<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>-->
-        <!--<Input-number :max="10" :min="1" v-model="obj.v"></Input-number>-->
-        <InputNumber :editable="false" :max="10" :min="1" :step="1.2" v-model="value2"></InputNumber>
-        <InputNumber :precision="1" :max="10" :min="1" :step="0.1" v-model="value1"></InputNumber>
+        <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
+        <InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber>
     </div>
 </template>
 <script>
     export default {
-        props: {},
         data () {
             return {
-                v1: 1,
-                v2: 1,
-                max: 10,
-                autofocus: true,
-                obj: {
-
-                },
-                value1: 1.0,
-                value2: 1
-            };
+                value1: 1800000,
+                value2: 55,
+                formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
+                parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
+                formatter2: (value) => `${value}%`,
+                parser2: (value) => value.replace('%', '')
+            }
         },
-        computed: {},
         methods: {
-            c () {
-                this.v1 = 5;
-            },
-            changeMax () {
-                this.max++;
+            change (v) {
+                console.log(v)
             }
         }
-    };
-</script>
\ No newline at end of file
+    }
+</script>
diff --git a/src/components/input-number/input-number.vue b/src/components/input-number/input-number.vue
index b11f438..0acdcff 100644
--- a/src/components/input-number/input-number.vue
+++ b/src/components/input-number/input-number.vue
@@ -29,7 +29,7 @@
                 @change="change"
                 :readonly="readonly || !editable"
                 :name="name"
-                :value="precisionValue">
+                :value="formatterValue">
         </div>
     </div>
 </template>
@@ -113,6 +113,12 @@
             },
             elementId: {
                 type: String
+            },
+            formatter: {
+                type: Function
+            },
+            parser: {
+                type: Function
             }
         },
         data () {
@@ -170,6 +176,13 @@
             precisionValue () {
                 // can not display 1.0
                 return this.precision ? this.currentValue.toFixed(this.precision) : this.currentValue;
+            },
+            formatterValue () {
+                if (this.formatter) {
+                    return this.formatter(this.precisionValue);
+                } else {
+                    return this.precisionValue;
+                }
             }
         },
         methods: {
@@ -256,6 +269,9 @@
             },
             change (event) {
                 let val = event.target.value.trim();
+                if (this.parser) {
+                    val = this.parser(val);
+                }
 
                 if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later
 
--
libgit2 0.21.4