Sliders

Explore iOS Slider continuous and stepped modes with min/max icon customization interactively.

9:41
●●●●WiFi🔋
Settings
Volume
🔈 🔊
50%
Brightness
75%
Text Size
A A
17pt
The quick brown fox jumps over the lazy dog
⚠️ HIG Violation: Improper slider usage
📚 HIG Guidelines — Try It Yourself
✓ Do — Good Example
✗ Don't — Bad Example

✓ Do This

  • Use min/max value labels or icons
  • Provide immediate visual feedback
  • Use stepped sliders for discrete values
  • Ensure the thumb is large enough to tap

✗ Don't Do This

  • Don't use sliders for very precise values
  • Don't use without visible track
  • Don't place sliders too close together
  • Don't use when a text field is more appropriate

👆 See the bad pattern in the iPhone preview above

Show Stepped Slider
SwiftUI Code
@State private var volume = 0.5 Slider(value: $volume) { Text("Volume") } minimumValueLabel: { Image(systemName: "speaker.fill") } maximumValueLabel: { Image(systemName: "speaker.wave.3.fill") } .tint(.blue)