SwiftUI Sliders: Complete Guide with Examples

Published on March 24, 2024

SwiftUI Slider iOS

Sliders are essential UI controls for selecting values from a continuous range. SwiftUI provides powerful ways to implement and customize sliders. Let's explore different implementations and customizations.

1. Basic Slider Implementation

Let's start with a simple slider example:

BasicSlider.swift

struct BasicSlider: View {
    @State private var value = 0.5
    
    var body: some View {
        VStack {
            Slider(value: $value)
                .padding()
            
            Text("Value: \(value, specifier: "%.2f")")
                .font(.headline)
        }
    }
}

2. Slider with Range and Step

Create a slider with specific range and step values:

RangeSlider.swift

struct RangeSlider: View {
    @State private var temperature = 20.0
    let range = 0.0...100.0
    let step = 5.0
    
    var body: some View {
        VStack(spacing: 20) {
            Text("Temperature: \(Int(temperature))°C")
                .font(.headline)
            
            HStack {
                Text("0°C")
                Slider(
                    value: $temperature,
                    in: range,
                    step: step
                )
                Text("100°C")
            }
            .padding()
        }
    }
}

3. Custom Styled Slider

Create a custom-styled slider with a gradient track:

CustomSlider.swift

struct CustomSlider: View {
    @Binding var value: Double
    let range: ClosedRange<Double>
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                Rectangle()
                    .foregroundColor(.gray.opacity(0.3))
                    .frame(height: 8)
                    .cornerRadius(4)
                
                Rectangle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(colors: [.blue, .purple]),
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                    .frame(width: geometry.size.width * CGFloat(
                        (value - range.lowerBound) / (range.upperBound - range.lowerBound)
                    ))
                    .frame(height: 8)
                    .cornerRadius(4)
                
                Circle()
                    .fill(.white)
                    .shadow(radius: 2)
                    .frame(width: 24, height: 24)
                    .offset(x: geometry.size.width * CGFloat(
                        (value - range.lowerBound) / (range.upperBound - range.lowerBound)
                    ) - 12)
                    .gesture(
                        DragGesture()
                            .onChanged { gesture in
                                let newValue = Double(
                                    gesture.location.x / geometry.size.width
                                )
                                value = min(max(
                                    range.lowerBound,
                                    range.lowerBound + (range.upperBound - range.lowerBound) * newValue
                                ), range.upperBound)
                            }
                    )
            }
        }
        .frame(height: 24)
    }
}

4. Slider with Labels and Ticks

Create a slider with custom labels and tick marks:

TickSlider.swift

struct TickSlider: View {
    @Binding var value: Double
    let ticks = [0, 25, 50, 75, 100]
    
    var body: some View {
        VStack(spacing: 8) {
            Slider(value: $value, in: 0...100)
                .padding(.horizontal)
            
            HStack {
                ForEach(ticks, id: \.self) { tick in
                    VStack {
                        Rectangle()
                            .fill(.gray)
                            .frame(width: 2, height: 10)
                        
                        Text("\(tick)")
                            .font(.caption)
                    }
                    
                    if tick != ticks.last {
                        Spacer()
                    }
                }
            }
            .padding(.horizontal)
        }
    }
}

5. Interactive Value Slider

Create a slider with interactive value display:

InteractiveSlider.swift

struct InteractiveSlider: View {
    @State private var value = 50.0
    @State private var isDragging = false
    
    var body: some View {
        VStack {
            if isDragging {
                Text("\(Int(value))")
                    .font(.title)
                    .foregroundColor(.blue)
                    .transition(.scale)
            }
            
            Slider(value: $value, in: 0...100) { dragging in
                withAnimation {
                    isDragging = dragging
                }
            }
            .padding()
        }
    }
}

Best Practices

Provide clear visual feedback during interaction
Use appropriate value ranges and step sizes
Consider accessibility requirements
Add haptic feedback for better user experience
Format displayed values appropriately

Accessibility Tips

Add meaningful accessibility labels
Provide value descriptions for VoiceOver
Support keyboard interactions
Use appropriate increment steps

AccessibleSlider.swift

struct AccessibleSlider: View {
    @Binding var value: Double
    
    var body: some View {
        Slider(value: $value, in: 0...100)
            .accessibilityValue("\(Int(value)) percent")
            .accessibilityLabel("Adjust value")
            .accessibilityHint("Slide to adjust the value between 0 and 100")
    }
}

SwiftUI sliders provide a flexible way to capture continuous input in your iOS applications. By following these patterns and best practices, you can create intuitive and accessible slider controls that enhance your app's user experience.