Vue.js ： 带有两个手柄的范围滑块

问：

我想创建一个vue js组件，其中包含一个带有两个句柄的小时范围滑块。
我使用 vue3 + vite.js

我尝试了此代码来实现组件，但是当我拖动其中一个句柄时，出现错误

代码：这是模板：

<template>
      <div>
        <input type="range" ref="rangeInput" v-model="rangeValue" @input="updateRange"/>
        <div class="range-slider">
          <div class="handle" :style="{left: leftHandle + '%'}" @mousedown="startHandleDrag(1)">
            {{ formatHour(rangeValue[0]) }}
          </div>
          <div class="handle" :style="{left: rightHandle + '%'}" @mousedown="startHandleDrag(2)">
            {{ formatHour(rangeValue[1]) }}
          </div>
        </div>
      </div>
    </template>

这是脚本：

<script>
export default {
  data() {
    return {
      rangeValue: [8, 18],
      handleDragging: 0
    };
  },
  computed: {
    leftHandle() {
      return this.rangeValue[0];
    },
    rightHandle() {
      return this.rangeValue[1];
    }
  },
  methods: {
    updateRange(event) {
      const value = event.target.value;
      const range = this.rangeValue;
      if (this.handleDragging === 1) {
        range[0] = value[0];
      } else if (this.handleDragging === 2) {
        range[1] = value[1];
      } else {
        range[0] = value[0];
        range[1] = value[1];
      }
      this.rangeValue = range;
    },
    startHandleDrag(handle) {
      this.handleDragging = handle;
      document.addEventListener("mouseup", this.stopHandleDrag);
      document.addEventListener("mousemove", this.updateRange);
    },
    stopHandleDrag() {
      this.handleDragging = 0;
      document.removeEventListener("mouseup", this.stopHandleDrag);
      document.removeEventListener("mousemove", this.updateRange);
    },
    formatHour(value) {
      return value + ":00";
    }
  }
};
</script>

错误：

任何解决它的想法!!