SwiftUI_visionOS_Note

Slider

Feb 28, 2024
2 min read|
1. allow users to easily "slide" or choose between multiple values, when users need to select a specific number, such as their age, without requiring a keyboard to actually type

Choose Slider

Choose slider with value completion

Slider(value:binaryPoint)
swift

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)
    }
}
swift

Change the colour

by using .tint()

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)

Change color when it gets slided

  1. Add a colour variable = .red
  1. onEditingCHange: { (_) in color = .green }
  1. 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)
    }
}
swift

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.

Subscribe to our newsletter

Get the latest news and updates from our team