スライドバーでターゲットになる要素を押して移動したときのイベントが発火されない

前提・実現したいこと

これらのサイトのようなスライドバーを作成したのですが、レンジのターゲットになる丸ポチ部分を移動したときにそこの値を取得してイベントを発火させたいと考えています。
イメージとしてはクリックして選択して、動かして離したときに発火させたいです。
レンジのライン上をクリックしたときにも発火するようにできるといいのですが、そこは追々実装していきたく考えています。
エラーは起きていないのですが、いろいろ組み込んでみたが発火されない状態です。

https://qiita.com/nezurika/items/ea3ae9a3e9ec3c158528
https://code-kitchen.dev/html/input-range/

Nuxt.jsで作成しています。

エラー

movieTest:1 Uncaught ReferenceError: changeTime is not defined
    at HTMLInputElement.onchange

該当のソースコード

Nuxt.js
1<template lang="html">
2  <div class="control-bar">
3    <div class="control-bar-container">
4      <div class="control-bar-play-icon">
5        <!-- 再生ボタン -->
6        <b-img
7          @click="isPlayed"
8          :src="playedIcon"
9          fluid
10        />
11      </div>
12
13      <div class="control-bar-time">
14        <!-- 再生時間 -->
15        <span>
16          {{ currentTime }} / {{ durationTime }}
17        </span>
18      </div>
19
20      <div class="control-bar-seekbar">
21        <!-- タイムバー -->
22        <div class="input-range input-range-seekbar">
23          <div class="input-range-bg" />
24          <div
25            @mousedown="mousedown"
26            class="input-range-val-bg"
27          />
28          <input
29            v-model="current"
30            type="range"
31            min="0"
32            max="1"
33            step="0.02"
34          >
35        </div>
36      </div>
37
38      <div class="control-bar-mute">
39        <!-- 音量ボタン -->
40        <b-img
41          @click="isSounded"
42          :src="soundedIcon"
43          fluid
44        />
45      </div>
46
47      <div class="control-bar-volume">
48        <!-- 音量バー -->
49        <div class="input-range input-range-volume">
50          <div class="input-range-bg" />
51          <div class="input-range-val-bg" />
52          <input
53            v-model="vol"
54            type="range"
55            min="0"
56            max="1"
57            step="0.05"
58          >
59        </div>
60      </div>
61    </div>
62  </div>
63</template>
64
65<script>
66export default {
67  props: {
68    volume: {
69      type: Object,
70      required: true
71    },
72    playedIcon: {
73      type: String,
74      required: true
75    },
76    soundedIcon: {
77      type: String,
78      required: true
79    },
80    durationTime: {
81      type: String,
82      required: false,
83      default: '00:00'
84    },
85    currentTime: {
86      type: String,
87      required: false,
88      default: '00:00'
89    },
90    current: {
91      type: Number,
92      required: false,
93      default: 0
94    }
95  },
96  data () {
97    return {
98      vol: 0.5,
99      isMoving: false
100    }
101  },
102  methods: {
103    // 再生アイコンが押下された場合
104    isPlayed () {
105      this.$emit('isPlayed')
106    },
107    // 音量アイコンが押下された場合
108    isSounded () {
109      this.$emit('isSounded')
110    },
111    changeTime () {
112      this.$emit('changeTime', 1)
113    },
114    changeVol (vol) {
115      this.$emit('changeVol', vol)
116    }
117  }
118}
119</script>
120
121<style lang="scss" scoped>
122.control-bar {
123  position: absolute;
124  bottom: 63px;
125  left: 0;
126  width: 100%;
127}
128
129.control-bar-container {
130  width: 1056px;
131  height: 52px;
132  margin: 0 auto;
133  padding-top: 42px;
134  display: -webkit-box;
135  display: flex;
136  -webkit-box-pack: justify;
137  justify-content: space-between;
138  -webkit-box-align: center;
139  align-items: center;
140}
141
142.control-bar-play-icon {
143  width: 42px;
144  text-align: left;
145}
146
147.control-bar-time {
148  width: 176px;
149  padding-left: 6px;
150  box-sizing: border-box;
151  font-family: Roboto;
152  font-weight: bold;
153  font-size: 28px;
154  line-height: 69px;
155  text-align: right;
156  color: #888;
157}
158
159.control-bar-time span {
160  display: inline-block;
161}
162
163.control-bar-time span:nth-child(2) {
164  margin: 0 4px;
165}
166
167.control-bar-seekbar {
168  width: 550px;
169  padding-right: 28px;
170}
171
172.control-bar-volume {
173  width: 160px;
174}
175
176.input-range {
177  position: relative;
178  width: 100%;
179}
180
181.input-range input[type="range"] {
182  margin: auto;
183  -webkit-appearance: none;
184  position: relative;
185  cursor: pointer;
186  height: 12px;
187  border-radius: 6px;
188  z-index: 10;
189  background: none;
190}
191
192::-webkit-slider-runnable-track {
193  background: none;
194  height: 12px;
195  border-radius: 6px;
196}
197
198::-webkit-slider-thumb {
199  -webkit-appearance: none;
200  appearance: none;
201  cursor: pointer;
202  width: 32px;
203  height: 32px;
204  background: #276fea;
205  -webkit-filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.32));
206  filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.32));
207  border-radius: 50%;
208  display: block;
209  position: relative;
210  top: -10px;
211  z-index: 5;
212}
213
214.input-range-bg {
215  display: block;
216  position: absolute;
217  top: 5px;
218  left: 0;
219  width: 100%;
220  height: 12px;
221  border-radius: 6px;
222  background: #bfbfbf;
223  z-index: 2;
224}
225
226.input-range-val-bg {
227  display: block;
228  position: absolute;
229  top: 5px;
230  left: 0;
231  width: 0px;
232  height: 12px;
233  border-radius: 6px;
234  background: #276fea;
235  z-index: 3;
236}
237
238.input-range-seekbar input[type="range"] {
239  width: 550px;
240}
241
242.input-range-volume input[type="range"] {
243  width: 160px;
244}
245
246.__cov-contrl-vol-slider {
247  position: relative;
248  display: inline-block;
249  height: 100%;
250  width: 6rem;
251  height: 2rem;
252  overflow: hidden;
253  transition: all 0.2s ease-in;
254}
255.__cov-contrl-vol-rail {
256  position: absolute;
257  top: 50%;
258  width: 6rem;
259  height: 0.1rem;
260  margin-top: -0.05rem;
261  background: #fff;
262}
263.__cov-contrl-vol-inner {
264  position: absolute;
265  display: inline-block;
266  left: 0;
267  top: 50%;
268  background: #fff;
269  width: 0.5rem;
270  height: 0.5rem;
271  border-radius: 50%;
272  margin-top: -0.25rem;
273  z-index: 2;
274  cursor: pointer;
275}
276
277.__cov-contrl-vol-slider {
278  position: relative;
279  display: inline-block;
280  height: 100%;
281  width: 6rem;
282  height: 2rem;
283  overflow: hidden;
284  transition: all 0.2s ease-in;
285}
286.__cov-contrl-vol-rail {
287  position: absolute;
288  top: 50%;
289  width: 6rem;
290  height: 0.1rem;
291  margin-top: -0.05rem;
292  background: yellow;
293}
294.__cov-contrl-vol-inner {
295  position: absolute;
296  display: inline-block;
297  left: 0;
298  top: 50%;
299  background: yellowgreen;
300  width: 0.5rem;
301  height: 0.5rem;
302  border-radius: 50%;
303  margin-top: -0.25rem;
304  z-index: 2;
305  cursor: pointer;
306}
307.range_slider {
308  height: 20px;
309  margin: 0 auto;
310  position: relative;
311  display: inline-block;
312}
313
314.range_wrapper {
315  position: relative;
316  height: 100%;
317  width: 100%;
318}
319
320.range {
321  height: 4px;
322  width: 100%;
323  background-color: #eee;
324  position: absolute;
325  top: calc(50% - 2px);
326  border-radius: 3px;
327}
328
329.circle {
330  width: 0;
331  height: 0;
332  top: 0;
333  border: 10px solid #ddd;
334  border-radius: 50%;
335  position: absolute;
336}
337</style>

試したこと

以下、編集しました。

上記、ソースの以下部分のように修正したところonmouseupは取れたっぽいのですが、元の画面でのエラーと思われるエラーが出ていたので上記にエラーも追記しました。

        <!-- タイムバー -->
        <div class="input-range input-range-seekbar">
          <div class="input-range-bg" />
          <div
            @mousedown="mousedown"
            class="input-range-val-bg"
          />
          <input
            v-model="current"
            type="range"
            min="0"
            max="1"
            step="0.02"
          >
        </div>