【SwiftUI】Sliderの使い方

Sliderは、スライドバーを左右に移動させて数値を選択する部品です。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.5
【Swift】5.2.4
【iOS】13.5
【macOS】Catalina バージョン 10.15.4
スポンサーリンク

基本的な使い方

最初の引数(value)には、値を関連付けるプロパティの頭に$を付けて指定します。
プロパティの型はDoubleかFloatのいずれかになります。
2つ目の引数(in)には、選択肢の最小値と最大値をClosedRange型で指定します。
inを省略した場合は0...1がデフォルト値として使用されます。

使用例

0から10の範囲を選択するSliderの例です。

基本的な使い方

スポンサーリンク

使用可能なオプション

value
値を関連付けるプロパティの頭に$を付けて指定します
プロパティの型はBinaryFloatingPointプロトコルに準拠している必要があり、DoubleやFloatがそれにあたります。

in(stepを指定しない場合は省略可)
選択肢の範囲をClosedRange型で指定します。
省略時のデフォルト値は"0...1"です。

step(省略可)
値を増加/現象させる数値幅を指定します。
省略時のデフォルト値は、Appleの公式ドキュメントでは1となっていますが、実際には設定可能な最小値が割当たるようです。

onEditingChanged(省略可)
ユーザーがスライダーの移動を開始または終了したときに実行される処理をクロージャーで指定します。
クロージャーは引数としてブール値を受け取り、操作開始時にはtrueが、操作終了時にはfalseが渡ります。

使用例

0から100の範囲で、1.0単位で値が変動するスライダーです。
onEditingChangedを使って、スライダーの操作時のみテキストを太文字にしています。

使用可能なオプション

スポンサーリンク

最大値/最小値ラベルを付ける

次のイニシャライザを使用すると、最大値/最小値ラベルを指定できます。

minimumValueLabel
左側に表示するViewを指定します。

maximumValueLabel
右側に表示するViewを指定します。

label
ラベルとして表示するViewを@ViewBuilder形式で指定します。
現時点でiOSではこのラベルは表示されませんが、省略もできないので、EmptyView()を指定します。

使用例

最小ラベルと最大ラベルと指定した例です。

最大値/最小値ラベルを付ける

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Stepperの使い方
Stepperの使い方を紹介します。 [-]と[+]ののボタンで値を増減するタイプの部品です。
【SwiftUI】Pickerの使い方
(2023/10/08 更新) Pickerは複数の選択肢の中から1つの値をユーザーに選択させるUI部品です。