diff --git a/package.json b/package.json
index c6ee86e..a2ee165 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "PLATO",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "a Boilerplate for mobile SPAs use vue, vuex, vue-router",
   "license": "MIT",
   "main": "src/index.js",
@@ -28,12 +28,12 @@
     "nuo": "^1.0.0",
     "query-string": "^4.2.3",
     "string-template": "^1.0.0",
-    "vue": "^2.0.5",
-    "vue-router": "^2.0.1",
+    "vue": "^2.0.6",
+    "vue-router": "^2.0.2",
     "vuex": "^2.0.0",
     "vuex-actions": "^1.1.1",
     "vuex-localstorage": "^0.3.0",
-    "whatwg-fetch": "^1.0.0"
+    "whatwg-fetch": "^2.0.0"
   },
   "devDependencies": {
     "babel-loader": "^6.2.7",
@@ -45,12 +45,12 @@
     "bundle-loader": "^0.5.4",
     "chai": "^3.5.0",
     "chromedriver": "^2.25.1",
-    "copy-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^4.0.1",
     "core-js": "^2.4.1",
     "cross-env": "^3.1.3",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.25.0",
-    "eslint": "^3.9.1",
+    "eslint": "^3.10.2",
     "eslint-config-plato": "^0.0.1",
     "eslint-friendly-formatter": "^2.0.6",
     "eslint-loader": "^1.6.0",
@@ -63,13 +63,13 @@
     "karma": "^1.3.0",
     "karma-coverage": "^1.1.1",
     "karma-es6-shim": "^1.0.0",
-    "karma-mocha": "^1.2.0",
+    "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.0",
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.0",
     "mocha": "^3.1.2",
-    "nightwatch": "^0.9.8",
+    "nightwatch": "^0.9.9",
     "nodemon": "^1.11.0",
     "phantomjs-polyfill": "^0.0.2",
     "phantomjs-prebuilt": "^2.1.13",
@@ -77,7 +77,7 @@
     "postcss-cssnext": "^2.8.0",
     "postcss-flexible": "^0.2.1",
     "postcss-import": "~8.0.2",
-    "postcss-loader": "^1.1.0",
+    "postcss-loader": "^1.1.1",
     "postcss-reporter": "^1.4.1",
     "postcss-url": "^5.1.2",
     "rimraf": "^2.5.4",
@@ -91,10 +91,10 @@
     "url-loader": "^0.5.7",
     "vue-hot-reload-api": "^2.0.6",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^9.8.0",
+    "vue-loader": "^9.9.5",
     "vue-style-loader": "^1.0.0",
-    "webpack": "^2.1.0-beta.25",
-    "webpack-dev-server": "^2.1.0-beta.10",
-    "yargs": "^6.3.0"
+    "webpack": "^2.1.0-beta.27",
+    "webpack-dev-server": "^2.1.0-beta.11",
+    "yargs": "^6.4.0"
   }
 }
diff --git a/src/components/core/directives/drag.js b/src/components/core/directives/drag.js
new file mode 100644
index 0000000..985751a
--- /dev/null
+++ b/src/components/core/directives/drag.js
@@ -0,0 +1,53 @@
+/**
+ * Simple directive for dragging events
+ */
+export default {
+  name: 'drag',
+  bind (el, { value, modifiers }) {
+    let startPoint = null
+    el.addEventListener('touchstart', e => {
+      startPoint = null
+      if (e.touches && e.touches.length === 1) {
+        startPoint = {
+          pageX: e.touches[0].pageX,
+          pageY: e.touches[0].pageY
+        }
+        el.dispatchEvent(createEvent('dragstart', { originalEvent: e }))
+      }
+    })
+    el.addEventListener('touchmove', e => {
+      if (startPoint) {
+        if (modifiers.direction) {
+          if ((value.horizontal && isHorizontal(e.touches[0], startPoint)) ||
+              (value.vertical && isVertical(e.touches[0], startPoint))) {
+            el.dispatchEvent(createEvent('drag', { originalEvent: e }))
+          } else {
+            startPoint = null
+          }
+        } else {
+          el.dispatchEvent(createEvent('drag', { originalEvent: e }))
+        }
+      }
+    })
+    el.addEventListener('touchend', e => {
+      if (startPoint) {
+        startPoint = null
+        el.dispatchEvent(createEvent('dragend', { originalEvent: e }))
+      }
+    })
+  }
+}
+
+function createEvent (name, mixins = {}) {
+  const tapEvent = document.createEvent('HTMLEvents')
+  tapEvent.initEvent(name, true, true)
+  return Object.assign(tapEvent, mixins)
+}
+
+function isHorizontal (to, from) {
+  return Math.abs(to.pageX - from.pageX) > Math.abs(to.pageY - from.pageY)
+}
+
+function isVertical (to, from) {
+  return Math.abs(to.pageX - from.pageX) < Math.abs(to.pageY - from.pageY)
+}
diff --git a/src/components/core/icon.vue b/src/components/core/icon.vue
index 10fffcd..8f655df 100644
--- a/src/components/core/icon.vue
+++ b/src/components/core/icon.vue
@@ -14,6 +14,10 @@ export default {
 
   beforeMount () {
     this.html = entities[this.$slots.default[0].text] || ' '
+  },
+
+  beforeUpdate () {
+    this.html = entities[this.$slots.default[0].text] || ' '
   }
 }
 
diff --git a/src/components/core/picker.vue b/src/components/core/picker.vue
index 6db7c7b..0eb344a 100644
--- a/src/components/core/picker.vue
+++ b/src/components/core/picker.vue
@@ -2,9 +2,10 @@
 <template>
   <div class="c-picker"
     :style="{height: itemHeight * size + 'px'}"
-    @touchstart="dragstart"
-    @touchmove="drag"
-    @touchend="dragend">
+    v-drag.direction="{vertical: 'yes'}"
+    @dragstart="dragstart"
+    @drag="drag"
+    @dragend="dragend">
     <div class="c-picker-cover"
       :style="{'background-size': '100% ' + (size - 1) / 2 * itemHeight + 'px'}">
       <div class="c-picker-highlight"
@@ -17,6 +18,8 @@
 </template>
 
 <script>
+import drag from './directives/drag'
+
 export default {
   props: {
     index: {
@@ -59,12 +62,10 @@ export default {
 
   watch: {
     index () {
-      if (!this.dragging) {
-        this.updateOffset()
-      }
+      this.calcOffset()
     },
     size () {
-      this.updateOffset()
+      this.calcOffset()
     }
   },
 
@@ -73,7 +74,7 @@ export default {
     this.itemLength = children.length
     if (this.itemLength) {
       this.itemHeight = children[0].clientHeight
-      this.updateOffset()
+      this.calcOffset()
     }
   },
 
@@ -83,7 +84,7 @@ export default {
       this.itemLength = children.length
       if (this.itemLength) {
         this.itemHeight = children[0].clientHeight
-        this.updateOffset()
+        this.calcOffset()
       } else {
         this.itemHeight = 0
         this.offset = 0
@@ -92,7 +93,7 @@ export default {
   },
 
   methods: {
-    updateOffset () {
+    calcOffset () {
       let index = this.index
       if (this.index > this.itemLength - 1) {
         index = this.itemLength - 1
@@ -100,30 +101,27 @@ export default {
       }
       this.offset = this.itemHeight * ((this.size - 1) / 2 - index)
     },
-    dragstart (e) {
-      if (!this.dragging && e.touches && e.touches.length === 1) {
-        this.dragging = true
-        this.startY = e.touches[0].pageY - this.offset
-      }
+    dragstart ({ originalEvent: e }) {
+      this.startY = e.touches[0].pageY - this.offset
     },
-    drag (e) {
-      if (this.dragging) {
-        e.preventDefault()
-        e.stopPropagation()
-        this.offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageY - this.startY))
-      }
+    drag ({ originalEvent: e }) {
+      // prevent scroll
+      e.preventDefault()
+      e.stopPropagation()
+      this.offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageY - this.startY))
     },
-    dragend (e) {
-      if (this.dragging) {
-        this.dragging = false
-        const offsetIndex = Math.max((this.size - 1) / 2 - this.itemLength, Math.round(this.offset / this.itemHeight))
-        this.offset = this.itemHeight * offsetIndex
-        const index = (this.size - 1) / 2 - offsetIndex
-        if (index !== this.index) {
-          this.$emit('change', index)
-        }
+    dragend ({ originalEvent: e }) {
+      const offsetIndex = Math.max((this.size - 1) / 2 - this.itemLength, Math.round(this.offset / this.itemHeight))
+      this.offset = this.itemHeight * offsetIndex
+      const index = (this.size - 1) / 2 - offsetIndex
+      if (index !== this.index) {
+        this.$emit('change', index)
       }
     }
+  },
+
+  directives: {
+    drag
   }
 }
 </script>
diff --git a/src/components/core/range.vue b/src/components/core/range.vue
index 10681ca..801ad3d 100644
--- a/src/components/core/range.vue
+++ b/src/components/core/range.vue
@@ -1,14 +1,17 @@
 <template>
   <div class="c-range"
-    @touchstart="dragstart"
-    @touchmove="drag"
-    @touchend="dragend">
+    :class="{disabled: disabled}"
+    v-drag.direction="{horizontal: 'yes'}"
+    @dragstart="dragstart"
+    @drag="drag">
     <div class="c-range-content"
-      :style="{width: '' + (offset / maxOffset * 100) + '%'}"></div>
+      :style="{width: '' + (percent * 100) + '%'}"></div>
   </div>
 </template>
 
 <script>
+import drag from './directives/drag'
+
 export default {
   props: {
     min: {
@@ -35,49 +38,52 @@ export default {
   data () {
     return {
       offset: 0,
-      range: 0,
-      maxOffset: 0,
-      stepOffset: 0
+      maxOffset: 0
+    }
+  },
+
+  computed: {
+    range () {
+      return this.max - this.min
+    },
+    stepOffset () {
+      return this.maxOffset / Math.ceil(this.range / this.step)
+    },
+    percent () {
+      return this.offset / this.maxOffset
     }
   },
 
   watch: {
-    value (val) {
-      if (!this.dragging) {
-        this.offset = (this.value - this.min) / this.range * this.maxOffset
-      }
+    value () {
+      this.calcOffset()
     }
   },
 
   mounted () {
     this.maxOffset = this.$el.clientWidth
-    this.range = this.max - this.min
-    this.stepOffset = this.maxOffset / Math.ceil(this.range / this.step)
-    const value = typeof this.value === 'number' ? this.value : this.min
-    this.offset = (value - this.min) / this.range * this.maxOffset
+    this.calcOffset()
   },
 
   methods: {
-    dragstart (e) {
-      if (!this.dragging && e.touches && e.touches.length === 1) {
-        this.dragging = true
-        this.startY = e.touches[0].pageX - this.offset
-      }
+    calcOffset () {
+      this.offset = typeof this.value === 'number' ? (this.value - this.min) / this.range * this.maxOffset : 0
     },
-    drag (e) {
-      if (this.dragging) {
-        e.preventDefault()
-        e.stopPropagation()
-        const offset = Math.min(this.maxOffset, Math.max(0, e.touches[0].pageX - this.startY))
-        this.offset = Math.round(offset / this.stepOffset) * this.stepOffset
-        this.$emit('change', parseInt(this.min + this.range * (this.offset / this.maxOffset), 10))
+    dragstart ({ originalEvent: e }) {
+      if (!this.disabled) {
+        this.startX = e.touches[0].pageX - this.offset
       }
     },
-    dragend (e) {
-      if (this.dragging) {
-        this.dragging = false
+    drag ({ originalEvent: e }) {
+      if (!this.disabled) {
+        this.offset = Math.round(Math.min(this.maxOffset, Math.max(0, e.touches[0].pageX - this.startX)) / this.stepOffset) * this.stepOffset
+        this.$emit('change', parseInt(this.min + this.range * this.percent, 10))
       }
     }
+  },
+
+  directives: {
+    drag
   }
 }
 </script>
diff --git a/src/components/core/scroller.vue b/src/components/core/scroller.vue
index 85600ae..b65366c 100644
--- a/src/components/core/scroller.vue
+++ b/src/components/core/scroller.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="c-scroller"
     :style="{height: height + 'px'}"
-    @touchstart="dragstart"
-    @touchmove="drag"
-    @touchend="dragend">
+    v-drag.direction="{vertical: 'yes'}"
+    @dragstart="dragstart"
+    @drag="drag"
+    @dragend="dragend">
     <div class="c-scroller-container"
       :style="{height: Math.max(maxHeight, height) + 1 + 'px'}">
       <div class="c-scroller-content"
@@ -30,6 +31,7 @@
 <script>
 import CIcon from './icon'
 import CSpinner from './spinner'
+import drag from './directives/drag'
 
 export default {
   props: {
@@ -120,18 +122,12 @@ export default {
       this.maxHeight = this.$refs.content.clientHeight
       this.maxScroll = Math.max(0, this.maxHeight - this.height)
     },
-    dragstart (e) {
-      if (!this.dragging && e.touches && e.touches.length === 1) {
-        this.dragging = true
-        // reset pull state
-        this.pullState = 0
-        this.startY = e.touches[0].pageY - this.offset
-      }
+    dragstart ({ originalEvent: e }) {
+      // reset pull state
+      this.pullState = 0
+      this.startY = e.touches[0].pageY - this.offset
     },
-    drag (e) {
-      if (!this.dragging) {
-        return
-      }
+    drag ({ originalEvent: e }) {
       // 无限模式 + 上拉状态
       if (this.infinite && this.pullState === -3) {
         return
@@ -165,11 +161,7 @@ export default {
         }
       }
     },
-    dragend (e) {
-      if (!this.dragging) {
-        return
-      }
-      this.dragging = false
+    dragend ({ originalEvent: e }) {
       if (this.infinite) {
         if (this.pullState < 0) {
           return
@@ -212,6 +204,10 @@ export default {
   components: {
     CIcon,
     CSpinner
+  },
+
+  directives: {
+    drag
   }
 }
 </script>
diff --git a/src/components/core/slider.vue b/src/components/core/slider.vue
index fac6ea6..a58f32c 100644
--- a/src/components/core/slider.vue
+++ b/src/components/core/slider.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="c-slider"
-    @touchstart="dragstart"
-    @touchmove="drag"
-    @touchend="dragend">
+    v-drag.direction="{horizontal: 'yes'}"
+    @dragstart="dragstart"
+    @drag="drag"
+    @dragend="dragend">
     <div class="c-slider-content"
       :class="{transition: transition && !dragging & !slideReady}"
       :style="{transform: 'translate3d(' + offset + 'px, 0, 0 )'}"
@@ -18,7 +19,7 @@
 </template>
 
 <script>
-import { isHorizontal } from './utils/direction'
+import drag from './directives/drag'
 
 const classes = {
   prev: 'c-slider-prev',
@@ -94,7 +95,6 @@ export default {
       this.slideCount && val !== -1 && this.children[val].classList.add(classes.prev)
     },
     currIndex (val, old) {
-      // this.slideReady = true
       this.slideCount && this.children[old].classList.remove(classes.active)
       this.slideCount && this.children[val].classList.add(classes.active)
     },
@@ -137,59 +137,55 @@ export default {
         }
       }
     },
-    dragstart (e) {
-      if (this.slideCount > 1 && !this.dragging && e.touches && e.touches.length === 1) {
-        this.dragging = true
-        this.isHorizontal = false
-        this.slideReady = false
-        this.timeStamp = e.timeStamp
-        this.start = e.touches[0]
-        this.startX = e.touches[0].pageX - this.offset
+    dragstart ({ originalEvent: e }) {
+      if (this.slideCount <= 1) {
+        return
       }
+      // this.dragging = true
+      this.isHorizontal = false
+      this.slideReady = false
+      // fix e.touches bug in iOS 8.1.3
+      this.start = {
+        pageX: e.touches[0].pageX,
+        pageY: e.touches[0].pageY
+      }
+      this.startX = e.touches[0].pageX - this.offset
     },
-    drag (e) {
-      if (this.dragging) {
-        // only slide while swipe horizontal
-        if (this.isHorizontal || isHorizontal(e.touches[0], this.start)) {
-          this.isHorizontal = true
-          e.preventDefault()
-          e.stopPropagation()
-          const offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageX - this.startX))
-          if (this.offset === 0 || offset * this.offset < -1) {
-            if (offset < 0) {
-              this.children[this.nextIndex].classList.remove(classes.prev)
-            } else if (offset > 0) {
-              this.children[this.prevIndex].classList.remove(classes.next)
-            }
-          }
-          this.offset = offset
-        } else {
-          this.dragging = false
-          this.isHorizontal = false
-          this.slideReady = true
-          this.offset = 0
+    drag ({ originalEvent: e }) {
+      // only slide while swipe horizontal
+      this.dragging = true
+      // get timeStamp when touchmove triggered, not touchstart
+      this.timeStamp = e.timeStamp
+      this.isHorizontal = true
+      e.preventDefault()
+      e.stopPropagation()
+      const offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageX - this.startX))
+      if (this.offset === 0 || offset * this.offset < -1) {
+        if (offset < 0) {
+          this.children[this.nextIndex].classList.remove(classes.prev)
+        } else if (offset > 0) {
+          this.children[this.prevIndex].classList.remove(classes.next)
         }
       }
+      this.offset = offset
     },
-    dragend (e) {
-      if (this.dragging) {
-        this.dragging = false
-        this.isHorizontal = false
-        const distance = this.offset / (e.timeStamp - this.timeStamp) * 1000 * this.sensitivity
-        if (this.offset > 0) {
-          if (Math.max(distance, this.offset) > this.maxOffset / 2) {
-            this.offset = this.maxOffset
-            return this.delay(this.prevIndex)
-          }
-        } else if (this.offset < 0) {
-          if (Math.min(distance, this.offset) < this.minOffset / 2) {
-            this.offset = this.minOffset
-            return this.delay(this.nextIndex)
-          }
+    dragend ({ originalEvent: e }) {
+      this.dragging = false
+      this.isHorizontal = false
+      const distance = this.offset / (e.timeStamp - this.timeStamp) * 1000 * this.sensitivity
+      if (this.offset > 0) {
+        if (Math.max(distance, this.offset) > this.maxOffset / 2) {
+          this.offset = this.maxOffset
+          return this.delay(this.prevIndex)
+        }
+      } else if (this.offset < 0) {
+        if (Math.min(distance, this.offset) < this.minOffset / 2) {
+          this.offset = this.minOffset
+          return this.delay(this.nextIndex)
         }
-        this.offset = 0
-        this.delay(this.currIndex)
       }
+      this.offset = 0
+      this.delay(this.currIndex)
     },
     delay (index) {
       this.transition ? setTimeout(() => {
@@ -207,6 +203,10 @@ export default {
         this.slideReady = true
       })
     }
+  },
+
+  directives: {
+    drag
   }
 }
 </script>
diff --git a/src/components/core/swiper.vue b/src/components/core/swiper.vue
index 008c070..9eb040a 100644
--- a/src/components/core/swiper.vue
+++ b/src/components/core/swiper.vue
@@ -2,10 +2,12 @@
   <div class="c-swiper"
     :class="{transition: transition}"
     :style="{transform: 'translate3d(' + offset + 'px, 0, 0)'}"
-    @touchstart="dragstart"
-    @touchmove="drag"
-    @touchend="dragend"
-    v-tap @tap="onTap">
+    v-drag.direction="{horizontal: 'yes'}"
+    @dragstart="dragstart"
+    @drag="drag"
+    @dragend="dragend"
+    v-tap
+    @tap="onTap">
     <div class="c-swiper-left" ref="left">
       <slot name="left"></slot>
     </div>
@@ -19,7 +21,7 @@
 </template>
 
 <script>
-import { isHorizontal } from './utils/direction'
+import drag from './directives/drag'
 
 export default {
   props: {
@@ -33,11 +35,7 @@ export default {
     return {
       offset: 0,
       minOffset: 0,
-      maxOffset: 0,
-      // 正在拖动，不需要响应式
-      // dragging: false,
-      // 符合拖动条件
-      matching: false
+      maxOffset: 0
     }
   },
 
@@ -64,46 +62,33 @@ export default {
         this.offset = 0
       }
     },
-    dragstart (e) {
-      if (!this.dragging && e.touches && e.touches.length === 1) {
-        this.dragging = true
-        this.matching = false
-        this.reset()
-        this.start = e.touches[0]
-        this.startX = e.touches[0].pageX - this.offset
-      }
+    dragstart ({ originalEvent: e }) {
+      this.reset()
+      this.startX = e.touches[0].pageX - this.offset
     },
-    drag (e) {
-      if (this.dragging) {
-        if (this.matching || isHorizontal(e.touches[0], this.start) > 0) {
-          this.matching = true
-          e.preventDefault()
-          e.stopPropagation()
-          this.offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageX - this.startX))
-        } else {
-          this.dragging = false
-          this.matching = false
-        }
-      }
+    drag ({ originalEvent: e }) {
+      e.preventDefault()
+      e.stopPropagation()
+      this.offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageX - this.startX))
     },
-    dragend (e) {
-      if (this.dragging) {
-        this.dragging = false
-        this.matching = false
-        if (this.offset > 0) {
-          if (this.offset > this.maxOffset / 2) {
-            this.offset = this.maxOffset
-            return
-          }
-        } else {
-          if (this.offset < this.minOffset / 2) {
-            this.offset = this.minOffset
-            return
-          }
+    dragend ({ originalEvent: e }) {
+      if (this.offset > 0) {
+        if (this.offset > this.maxOffset / 2) {
+          this.offset = this.maxOffset
+          return
+        }
+      } else {
+        if (this.offset < this.minOffset / 2) {
+          this.offset = this.minOffset
+          return
         }
-        this.offset = 0
       }
+      this.offset = 0
     }
+  },
+
+  directives: {
+    drag
   }
 }
 </script>
diff --git a/src/components/core/utils/direction.js b/src/components/core/utils/direction.js
deleted file mode 100644
index 05d5f05..0000000
--- a/src/components/core/utils/direction.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export function isHorizontal (to, from) {
-  return Math.abs(to.pageX - from.pageX) > Math.abs(to.pageY - from.pageY)
-}
-
-export function isVertical (to, from) {
-  return Math.abs(to.pageX - from.pageX) < Math.abs(to.pageY - from.pageY)
-}
diff --git a/src/demos/range.vue b/src/demos/range.vue
index 1568094..d1d7051 100644
--- a/src/demos/range.vue
+++ b/src/demos/range.vue
@@ -6,6 +6,13 @@
         @change="change"></c-range>
       <p class="center">value: {{value}}, min: 0, max: 100</p>
     </c-row>
+    <c-row class="padding" :flex="false">
+      <c-range
+        :value="value"
+        :disabled="true"
+        @change="change"></c-range>
+      <p class="center">(disabled) value: {{value}}, min: 0, max: 100</p>
+    </c-row>
     <c-row class="padding" :flex="false">
       <c-range
         :value="value"
diff --git a/src/directives/tap.js b/src/directives/tap.js
index 43d3d45..e2bbaba 100644
--- a/src/directives/tap.js
+++ b/src/directives/tap.js
@@ -5,31 +5,32 @@ export default {
   name: 'tap',
   bind (el, { value, modifiers }) {
     const threshold = window.innerWidth / 10
-    let start
+    let startPoint
     el.addEventListener('touchstart', e => {
-      start = null
+      startPoint = null
       if (e.touches && e.touches.length === 1) {
-        start = e.touches[0]
+        // fix e.touches bug in iOS 8.1.3
+        startPoint = {
+          pageX: e.touches[0].pageX,
+          pageY: e.touches[0].pageY
+        }
       }
     })
     el.addEventListener('touchmove', e => {
-      if (start) {
-        if (Math.sqrt(Math.pow(e.touches[0].pageX - start.pageX, 2) + Math.pow(e.touches[0].pageY - start.pageY, 2)) > threshold) {
-          start = null
+      if (startPoint) {
+        if (Math.sqrt(Math.pow(e.touches[0].pageX - startPoint.pageX, 2) + Math.pow(e.touches[0].pageY - startPoint.pageY, 2)) > threshold) {
+          startPoint = null
         }
       }
     })
-    el.addEventListener('touchend', e => {
-      if (start) {
-        start = null
+    el.addEventListener('touchend', originalEvent => {
+      if (startPoint) {
+        startPoint = null
         // dispatch a tap event
-        const tapEvent = document.createEvent('HTMLEvents')
-        tapEvent.initEvent('tap', true, true)
-        // add referrence to original event
-        tapEvent.originalEvent = e
+        const tapEvent = createEvent('tap', { originalEvent })
         if (modifiers.delay) {
           // useful for hiding el after tap that has a link inside
-          // see: c-navibar.vue
+          // see: components/navibar.vue
           setTimeout(() => {
             el.dispatchEvent(tapEvent)
           }, value || 300)
@@ -40,3 +41,9 @@ export default {
     })
   }
 }
+
+function createEvent (name, mixins = {}) {
+  const tapEvent = document.createEvent('HTMLEvents')
+  tapEvent.initEvent(name, true, true)
+  return Object.assign(tapEvent, mixins)
+}
diff --git a/src/store/modules/faq.js b/src/store/modules/faq.js
index 6e0e469..cd5c383 100644
--- a/src/store/modules/faq.js
+++ b/src/store/modules/faq.js
@@ -1,4 +1,4 @@
-import template from '../template'
+import template from '../templates/rest'
 import { ONE_MINUTE } from '../constants'
 
 export default template({
diff --git a/src/store/template.js b/src/store/templates/rest.js
similarity index 100%
rename from src/store/template.js
rename to src/store/templates/rest.js
diff --git a/src/themes/default/app.css b/src/themes/default/app.css
index 6408a1d..3c9ce8f 100644
--- a/src/themes/default/app.css
+++ b/src/themes/default/app.css
@@ -43,8 +43,8 @@
 #logo {
   position: absolute;
   z-index: 1;
-  left: dpr(88px);
-  right: dpr(88px);
+  left: dpr(132px);
+  right: dpr(132px);
 
   & a {
     display: block;
@@ -59,7 +59,7 @@
   }
 
   & sub {
-    font-size: dpr(24px);
+    font-size: dpr(12px);
   }
 }
 
diff --git a/src/themes/default/components/core/range.css b/src/themes/default/components/core/range.css
index de96715..a1b97f7 100644
--- a/src/themes/default/components/core/range.css
+++ b/src/themes/default/components/core/range.css
@@ -8,6 +8,14 @@
     height: dpr(4px);
     background-color: var(--placeholder);
   }
+
+  &.disabled {
+    & .c-range-content {
+      &::after {
+        background-color: var(--placeholder);
+      }
+    }
+  }
 }
 
 .c-range-content {
diff --git a/test/unit/specs/components/core/icon.spec.js b/test/unit/specs/components/core/icon.spec.js
index 8a33dab..c6bb13a 100644
--- a/test/unit/specs/components/core/icon.spec.js
+++ b/test/unit/specs/components/core/icon.spec.js
@@ -41,4 +41,28 @@ describe('icon.vue', () => {
     expect(vm.$children.length).to.equal(1)
     expect(vm.$children[0].$el.textContent).to.equal(String.fromCharCode(parseInt(entities.eye.replace(/[^0-9a-f]/ig, ''), 16)))
   })
+
+  it('should render correct contents after update', done => {
+    vm = new Vue({
+      el,
+      template: '<c-icon>{{icon}}</c-icon>',
+      components: {
+        CIcon
+      },
+      data: {
+        icon: 'PLATO'
+      }
+    })
+
+    expect(vm.$children.length).to.equal(1)
+    expect(vm.$children[0].$el.textContent).to.equal(' ')
+
+    vm.icon = 'eye'
+
+    vm.$nextTick(() => {
+      expect(vm.$children.length).to.equal(1)
+      expect(vm.$children[0].$el.textContent).to.equal(String.fromCharCode(parseInt(entities.eye.replace(/[^0-9a-f]/ig, ''), 16)))
+      done()
+    })
+  })
 })
diff --git a/test/unit/specs/store/template.spec.js b/test/unit/specs/store/template.spec.js
index cf3abc1..108ef31 100644
--- a/test/unit/specs/store/template.spec.js
+++ b/test/unit/specs/store/template.spec.js
@@ -1,4 +1,4 @@
-import template from 'store/template'
+import template from 'store/templates/rest'
 import { ONE_MINUTE } from 'store/constants'
 
 describe('env', () => {
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index bcc273a..49d1f20 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -60,7 +60,7 @@ const webpackConfig = {
       {
         test: /\.(js|vue)$/,
         exclude: /node_modules/,
-        loader: 'eslint',
+        loader: 'eslint-loader',
         options: {
           emitWarning: __DEV__,
           formatter: require('eslint-friendly-formatter')
@@ -69,33 +69,33 @@ const webpackConfig = {
       },
       {
         test: /\.vue$/,
-        loader: 'vue',
+        loader: 'vue-loader',
         options: {
           loaders: {
             css: __PROD__ ? ExtractTextPlugin.extract({
-              loader: 'css?sourceMap',
-              fallbackLoader: 'vue-style'
-            }) : 'vue-style!css?sourceMap',
-            js: 'babel'
+              loader: 'css-loader?sourceMap',
+              fallbackLoader: 'vue-style-loader'
+            }) : 'vue-style-loader!css-loader?sourceMap',
+            js: 'babel-loader'
           }
         }
       },
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel'
+        loader: 'babel-loader'
       },
       {
         test: /\.json$/,
-        loader: 'json'
+        loader: 'json-loader'
       },
       {
         test: /\.html$/,
-        loader: 'vue-html'
+        loader: 'vue-html-loader'
       },
       {
         test: /@[1-3]x\S*\.(png|jpg|gif)(\?.*)?$/,
-        loader: 'file',
+        loader: 'file-loader',
         options: {
           name: '[name].[ext]?[hash:7]'
         }
@@ -104,7 +104,7 @@ const webpackConfig = {
         test: /\.(png|jpg|gif|svg|woff2?|eot|ttf)(\?.*)?$/,
         // do NOT base64encode @1x/@2x/@3x images
         exclude: /@[1-3]x/,
-        loader: 'url',
+        loader: 'url-loader',
         options: {
           limit: 10000,
           name: '[name].[ext]?[hash:7]'