[Vue.js] レンジ（スライド）の値をデータバインディングさせてみた

やりたいこと

上記のようなレンジをつくり、レンジの値をかえるたびに
データバインディングさせ、その値を表示させたい。

やったこと

<template>
  <div class="range" data-value="50">
    <div class="label" :style="{ left: rangeValue + '%' }">
      <div class="value">
        {{ rangeValue }}
      </div>
      <div class="drop" />
    </div>
    <div class="input-box">
      <input
        id="input-range"
        v-model="rangeValue"
        type="range"
        min="0"
        max="100"
        value="50"
      />
      <div class="bar" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseRange',
  data() {
    return {
      rangeValue: 50,
    }
  },
}
</script>

<style lang="scss" scoped>
@import '../../../assets/scss/object/component/range';
</style>