Sliders — HIG Playground

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

Rating (Steps)

1 5

⭐⭐⭐

⚠️ 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)