質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

762閲覧

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

chaso_0307

総合スコア2

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/05/27 08:38

編集2020/05/27 09:29

前提・実現したいこと

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

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>

補足情報(FW/ツールのバージョンなど)

Nuxt.js 2.0.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問