Choose Slider
Choose slider with value completion
Slider(value:binaryPoint)
binaryPoint is just number, we will bind double 10 to a value
struct ContentView: View {
@State var sliderValue: Double = 10
var body: some View {
Slider(value:$sliderValue)
.padding(.horizontal)
}
}
Add a value in certain number section
.Slider(value: $sliderValue, in: 0...20)
Add a step (몇씩 움직이는지)
.Slider(value: $sliderValue, in: 0...20, step: 1.0)
Format the number
instead of showing 0.0000001 value, we can format the number to show how many decimal points we want to show.
.Text(String(format: "%.2f", sliderValue)
- Add a colour variable = .red
onEditingCHange: { (_) in color = .green }
- add min and max value label to show the number
struct ContentView: View {
@State var sliderValue: Double = 5
@State var color: Color = .red
var body: some View {
VStack {
Text("Rating:")
Text(
String(format: "%.0f", sliderValue)
).foregroundColor(color)
.font(.title)
Slider(
value: $sliderValue,
in: 1...5,
step: 1.0,
onEditingChanged: { (_) in
color = .green
},
minimumValueLabel: Text("1"),
maximumValueLabel: Text("5"), label: {Text("Title")})
}.padding(.horizontal)
}
}
Today, I explored Slider and TabView. While I had previously relied on NavigationStack for view composition, TabView simplifies navigation between different pages.
Slider provides a user-friendly way to select from a range of values. It allows for number formatting, setting of step and range, and labeling of minimum and maximum values.
By using TabView() and .tabItem, we can embed different views within each .tabItem using tags and bindings. TabView presents two styles. The PageTabView style and the default view.
⭐ Check my github repo to see how slider and tabView work https://github.com/Yoon-Ro/VisionOS
Here is the draft of the L5570 newsletter.
The newsletter is scheduled for distribution at noon.
I scheduled the newsletter to be sent out at noon.