<template>
  <div class="range-layout">
    <span>2015-01-09</span>
    <div class="continue" ref="continue">
      <a class="bar" @mousedown="handleMousedown" :style="{left}">
      </a>
    </div>
    <span>2017-01-09</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      x: 0
    }
  },
  methods: {
    handleMousedown (ev) {
      let min = 0
      let max = this.$refs.continue.offsetWidth
      let startX = ev.clientX
      let start = this.x

      let mousemove = ev => {
        let x = start + (ev.clientX - startX)
        x = x < min ? min : (x > max ? max : x)
        this.x = x

        ev.stopPropagation()
        ev.preventDefault()
      }
      let mouseup = ev => {
        document.removeEventListener('mousemove', mousemove, false)
        document.removeEventListener('mouseup', mouseup, false)
      }

      document.addEventListener('mousemove', mousemove, false)
      document.addEventListener('mouseup', mouseup, false)

      ev.stopPropagation()
      ev.preventDefault()
    }
  },
  computed: {
    left () {
      return this.x - 5 + 'px'
    }
  }
}
</script>

<style scoped>
@import url('./style.css');
</style>
