スワイプで確定するボタン
つまみを右端までスワイプして初めて確定する、誤タップ防止のためのボタンです。Pointer Events（ pointerdown pointermove pointerup ）でつまみの移動量を計算し、全幅の9割以上までドラッグできたら完了状態に切り替えます。
解説
つまみを右端までスワイプして初めて確定する、誤タップ防止のためのボタンです。Pointer Events（pointerdown pointermove pointerup）でつまみの移動量を計算し、全幅の9割以上までドラッグできたら完了状態に切り替えます。setPointerCapture と touch-action:none を使っているため、指でもマウスでも途切れず追従し、スクロールと干渉しません。完了するとつまみが緑に変わって確定を知らせます。
こんな操作に向いています
- 決済や送信など、押し間違えると困る重要アクション
- 退会・削除といった取り消せない操作の最終確認
- 本人の意思をはっきり示してほしいモバイルUI
確定とみなす距離は、スクリプト内の「9割」のしきい値を上げ下げすると厳しく/緩く調整できます。色やサイズはトラックとつまみの幅・背景色を変えるだけで合わせられます。注意点として、ドラッグ操作だけだとキーボードやスクリーンリーダーの利用者が確定できないため、同じ動作をするボタンやキー操作の代替手段を必ず用意してください。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
スマホとパソコンの両方で動きますか
両方で動きます。Pointer Eventsという仕組みを使っているため、指でのスワイプもマウスでのドラッグも同じコードで扱えます。タッチ操作中にページがスクロールしてしまわない対策も入っています。
どこまで動かせば確定になりますか
つまみを右端の9割の位置まで動かすと確定します。この割合はスクリプト内の数値を変えれば調整でき、値を大きくするほど最後までしっかり動かさないと確定しない厳しい設定になります。