← 一覧へ

やってみようつまみを右端までドラッグしてみてください

ボタン・操作部品マイナー(知る人ぞ知る)

スライドして確定

Slide to Confirm / Slide to Unlock

丸いつまみを右端までスライドさせると確定する。うっかり押してしまわないための仕組み。

別名スライドボタンスワイプで確定スライドで解除Slide to Pay

どこで使われている?

よく見かける場所
送金アプリ、昔のiPhoneのロック解除、配達完了の報告
使うとよい場面
送金・注文確定など、間違えて押すと困る操作
避けたい場面
よく使う普通の操作(毎回スライドは面倒)

補足送金や注文確定など、間違えて押すと困る操作に使われます。

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「スライドして確定(Slide to Confirm / Slide to Unlock)」を実装してください。

動き:横長のレールの左端に丸いつまみを置き、右端まで動かしたときだけ操作を確定する。途中で離すとつまみを左へ戻し、確定したらレールを緑にして✓を表示する。

使う部品:Pointer Events で自作
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

WebサイトならPointer Events で自作
iPhoneアプリならDragGesture で自作
AndroidアプリならModifier.draggable で自作
Flutterなら自作(slide_to_act パッケージ)
React Nativeなら自作(rn-swipe-button)