Sometimes we have settings that can have a potentially dangerous impact, so we want to clearly show the situation — think, for example, of volume control. In such cases, we might want to customize the slider to provide color feedback, as shown in the figure:
We want to use blue for values under 30, orange for values between 30 and 70, and red for values above 70.
Let’s take a look at the code:
struct ContentView: View {
@State private var value: Double = 50
var body: some View {
VStack(alignment: .leading, spacing: 16) {
HStack {
Text("Volume")
.font(.headline)
Spacer()
Text("\(Int(value))%")
.font(.headline)
.foregroundStyle(colorByValue(for: value))
.animation(.easeInOut, value: value)
}
Slider(value: $value, in: 0...100, step: 1)
.accentColor(colorByValue(for: value))
}
.padding()
}
private func colorByValue(for value: Double) -> Color {
switch value {
case 0..<30:
return .blue
case 30..<70:
return .orange
default:
return .red
}
}
}To change the bar color, we set the accentColor on the slider. The text color is controlled using foregroundStyle, and we apply an easeInOut animation so the text color transitions smoothly as the value changes.