Vueでイベントの検知がうまくできない

前提・実現したいこと

以下のソースコードの音量およびタイムバーでスライダー式のバーが存在するのですが、●の球を動かすと音量や今の動画再生時間が変わるようにしたいのですが、球を押したときのイベント検知がうまくできていない状況です。

発生している問題・エラーメッセージ

イベントが検知できていない。

該当のソースコード

Vue.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          {{ 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            class="input-range-val-bg"
26          />
27          <input type="range">
28        </div>
29      </div>
30
31      <div class="control-bar-mute">
32        <!-- 音量ボタン -->
33        <b-img
34          @click="isSounded"
35          :src="soundedIcon"
36          fluid
37        />
38      </div>
39
40      <div class="control-bar-volume">
41        <!-- 音量バー -->
42        <div
43          class="input-range input-range-volume"
44        >
45          <div
46            class="input-range-bg"
47          />
48          <div
49            @click="volSlideClick"
50            class="input-range-val-bg"
51          />
52          <input type="range">
53        </div>
54      </div>
55    </div>
56  </div>
57</template>
58
59<script>
60export default {
61  props: {
62    playedIcon: {
63      type: String,
64      required: true
65    },
66    soundedIcon: {
67      type: String,
68      required: true
69    },
70    durationTime: {
71      type: String,
72      required: false,
73      default: '00:00'
74    }
75  },
76  methods: {
77    // 再生ボタンが押下された場合
78    isPlayed () {
79      this.$emit('isPlayed')
80    },
81    // 音量ボタンが押下された場合
82    isSounded () {
83      this.$emit('isSounded')
84    },
85    volSlideClick () {
86      this.$emit('volSlideClick')
87    }
88  }
89}
90</script>
91
92<style lang="scss" scoped>
93.control-bar {
94  position: absolute;
95  bottom: 63px;
96  left: 0;
97  width: 100%;
98}
99
100.control-bar-container {
101  width: 1056px;
102  height: 52px;
103  margin: 0 auto;
104  padding-top: 42px;
105  display: -webkit-box;
106  display: flex;
107  -webkit-box-pack: justify;
108  justify-content: space-between;
109  -webkit-box-align: center;
110  align-items: center;
111}
112
113.control-bar-play-icon {
114  width: 42px;
115  text-align: left;
116}
117
118.control-bar-time {
119  width: 176px;
120  padding-left: 6px;
121  box-sizing: border-box;
122  font-family: Roboto;
123  font-weight: bold;
124  font-size: 28px;
125  line-height: 69px;
126  text-align: right;
127  color: #888;
128}
129
130.control-bar-time span {
131  display: inline-block;
132}
133
134.control-bar-time span:nth-child(2) {
135  margin: 0 4px;
136}
137
138.control-bar-seekbar {
139  width: 550px;
140  padding-right: 28px;
141}
142
143.control-bar-volume {
144  width: 160px;
145}
146
147.input-range {
148  position: relative;
149  width: 100%;
150}
151
152.input-range input[type="range"] {
153  margin: auto;
154  -webkit-appearance: none;
155  position: relative;
156  cursor: pointer;
157  height: 12px;
158  border-radius: 6px;
159  z-index: 10;
160  background: none;
161}
162
163::-webkit-slider-runnable-track {
164  background: none;
165  height: 12px;
166  border-radius: 6px;
167}
168
169::-webkit-slider-thumb {
170  -webkit-appearance: none;
171          appearance: none;
172  cursor: pointer;
173  width: 32px;
174  height: 32px;
175  background: #276fea;
176  -webkit-filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.32));
177          filter: drop-shadow(0px 4px 0px rgba(0, 0, 0, 0.32));
178  border-radius: 50%;
179  display: block;
180  position: relative;
181  top: -10px;
182  z-index: 5;
183}
184
185.input-range-bg {
186  display: block;
187  position: absolute;
188  top: 5px;
189  left: 0;
190  width: 100%;
191  height: 12px;
192  border-radius: 6px;
193  background: #BFBFBF;
194  z-index: 2;
195}
196
197.input-range-val-bg {
198  display: block;
199  position: absolute;
200  top: 5px;
201  left: 0;
202  width: 0px;
203  height: 12px;
204  border-radius: 6px;
205  background: #276fea;
206  z-index: 3;
207}
208
209.input-range-seekbar input[type="range"] {
210  width: 550px;
211}
212
213.input-range-volume input[type="range"] {
214  width: 160px;
215}
216</style>