SwiftUIのSliderの使い方を簡単に説明してみました！

SwiftUIでユーザーに数値を選ばせたいときに便利なのが、Slider。
音量調整や明るさ設定など、アプリに欠かせないUIパーツです！

基本のSliderの使い方

struct ContentView: View {
   @State var sliderValue: Double = 0.5   //@Stateで状態（値）を管理

   var body: some View {
       VStack {
           Slider(value: $sliderValue)   //Slider(value: $sliderValue) でスライダーと値をバインド
           Text("値: \(sliderValue)")　//スライドするたびにsliderValueが更新され、表示される数値も変化します

           
       }
       .padding()
   }
}

最小値・最大値を指定する

  Slider(value: $sliderValue, in: 0...100)

ステップ（刻み幅）を設定する

Slider(value: $sliderValue, in: 0...10, step: 1)

• step: 1 で 1刻み のスライダーになります（整数しか選べない）

カスタム表示（最小値・最大値のラベル）

Slider(
    value: $sliderValue,
    in: 0...100,
    minimumValueLabel: Text("0"),
    maximumValueLabel: Text("100")
) 

minimumValueLabelとmaximumValueLabelを使えば、左右に目盛り表示も可能です

まとめ

機能	記述方法
値のバインディング	Slider(value: $変数名)
範囲の指定	in: 最小値...最大値
刻み幅の指定	step: 刻み幅
ラベル付きスライダー	Slider { Text("ラベル") }
最小値・最大値ラベルの表示	minimumValueLabel と maximumValueLabel を使う

最後に

Silderは、ちょっとした設定で大きく見た目も変わるので、ぜひ自分のアプリで試してみてください！ぜひ参考にしてみてください！ 🤌