【SwiftUI】ビューコントローラー：Slider

環境

Xcode：16.1
Swift：6
iOS：16

基本

概要

Sliderとは
※iOS13から
スライドバーを左右に移動させて数値を選択するビュー

パラメータ

value：スライダーの値を保持するDouble型の状態変数を指定
in：スライダーの範囲（例: 0...100）
step：スライダーのステップサイズ（省略可能）
onEditingChanged：スライダーの操作開始・終了時に呼び出されるクロージャ（省略可能）

Slider(value: $sliderValue, in: 0...100, step: 5) { isEditing in
    print(isEditing ? "操作開始" : "操作終了")
}

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

例

import SwiftUI

struct ContentView: View {
    @State private var sliderValue: Double = 5

    var body: some View {
        // 値を表示（Intに変換して表示）
        Text("Value: \(Int(sliderValue))")

        // 値を保持する変数と値の範囲を指定
        Slider(value: $sliderValue, in: 0...10)
            .padding()
    }
}

#Preview {
    ContentView()
}

最大値/最小値を表示

import SwiftUI

struct ContentView: View {
    @State private var sliderValue: Double = 5

    var body: some View {
        Form {
            Section("Slider"){

                // 値を表示（Intに変換して表示）
                Text("Value: \(Int(sliderValue))")

                // 値を保持する変数と値の範囲を指定
                Slider(value: $sliderValue,
                       in: 1...10,
                       minimumValueLabel: Text("1"), // 最小ラベル
                       maximumValueLabel: Text("10"),  // 最大ラベル
                       label: { EmptyView() }           // iOSでは未使用（ないとエラー）
                )
            }
        }
    }
}

#Preview {
    ContentView()
}

スライダーの色を指定（accentColor）

Slider(value: $sliderValue, in: 0...10)
    .accentColor(.red)

スライダーの幅や高さを指定（frame）

Slider(value: $sliderValue, in: 0...10)
    .frame(width: 200, height: 100)

スライダーの背景色を指定（background）

Slider(value: $sliderValue, in: 0...10)
    .background(Color.green.opacity(0.2).cornerRadius(10))

値を変更した時の処理（onChange）

※iOS14から

Slider(value: $sliderValue, in: 0...10)
    .onChange(of: sliderValue) { newValue in
        print("変更後の値: \(newValue)")
    }