ノーコードプログラミングのBubbleの解説をやっていきます。
Bubbleは僕もまだまだ勉強中な部分も非常に多いので備忘的な部分も多く含めているのをご了承ください。
スライダーインプット設定項目
Bubbleのスライダーはその名の通り画面上にスライダーを配置する機能です。
スライダーはなかなか見ることが少ないですが、必要に応じて使えると便利なので覚えておいて損はないと思います。
今回はそんなスライダーについて解説していきます。
インプット項目作成方法
バブルでのインプット項目は複数あり、「テキスト」「マルチラインテキスト」「チェックボックス」「ドロップダウン(プルダウン)」「検索ボックス」「ラジオボタン」「スライダー」「カレンダー」「画像アップローダー」「ファイルアップローダー」がデフォルト機能として用意されています。
さらにプラグインとして様々な機能を追加できるのでより凝ったUIを作成することができる様になります。
そんなinput項目で今回は「Slider Input」の設定をしていきます。
「Bubble」でスライダーを設定しよう
1-1.デフォルトのスライダーの状態は以下の通りです。
(分かりやすい様に「Min Value」を「0」、「Max Value」を「100」にしています。
![スライダー_デフォルト](https://katojishi.com/wp-content/uploads/2024/01/1-1-1.jpg)
![スライダー_デフォルト_プレビュー](https://katojishi.com/wp-content/uploads/2024/01/1-1-2.jpg)
1-2.「Step」の値を変更すると「Step」の値に応じてスライダーの変更量が変わります。
(「5」にしたら「5、10、15」といった感じです。)
![スライダー_デフォルト_Step](https://katojishi.com/wp-content/uploads/2024/01/1-2-1-1.jpg)
![スライダー_デフォルト_Step_プレビュー](https://katojishi.com/wp-content/uploads/2024/01/1-2-2.gif)
1-3.スライダーインプットの「Slider Type」をデフォルトの「Simple」から「Range」に変更すると範囲選択に変わります。
![スライダー_デフォルト_SliderType](https://katojishi.com/wp-content/uploads/2024/01/1-3-1-1.jpg)
![スライダー_デフォルト_SliderType_プレビュー](https://katojishi.com/wp-content/uploads/2024/01/1-3-2.gif)
1-4.スライダーインプットの「Orientation」をデフォルトの「Horizontal」から「Vertical」に変更すると横スライダーから縦スライダーに変更することができます。
(分かりやすい様に縦幅をかなり広くとりました)
![スライダー_デフォルト_Orientation](https://katojishi.com/wp-content/uploads/2024/01/1-4-1-1.jpg)
![スライダー_デフォルト_Orientation_プレビュー](https://katojishi.com/wp-content/uploads/2024/01/1-4-2.gif)
1-5.スライダーインプットの「This input is disabled」にチェックを入れると、実際の画面での状態を変更できなくすることができます。
![スライダー_デフォルト_入力状態](https://katojishi.com/wp-content/uploads/2024/01/1-5-1-1.jpg)
![スライダー_デフォルト_入力状態_プレビュー](https://katojishi.com/wp-content/uploads/2024/01/1-5-2-1.jpg)
今回はここまで。
次回もインプット項目について解説していきます。
コメント