Improve slider example a bit

AccessibilityTalk.xcodeproj/project.pbxproj

@@ -26,8 +26,9 @@
 		96088D922B7B220200E062FB /* GoodDayView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D912B7B220200E062FB /* GoodDayView.swift */; };
 		96088D942B7B286E00E062FB /* CalendarBadView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D932B7B286E00E062FB /* CalendarBadView.swift */; };
 		96088D962B7B300C00E062FB /* CalendarGoodView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D952B7B300C00E062FB /* CalendarGoodView.swift */; };
-		96088D982B7B37B400E062FB /* CustomSlider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D972B7B37B400E062FB /* CustomSlider.swift */; };
+		96088D982B7B37B400E062FB /* BadSlider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D972B7B37B400E062FB /* BadSlider.swift */; };
 		96088D9A2B7B39C300E062FB /* ExampleSliderView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D992B7B39C300E062FB /* ExampleSliderView.swift */; };
+		96088D9C2B7B3D6800E062FB /* GoodSlider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D9B2B7B3D6800E062FB /* GoodSlider.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -51,8 +52,9 @@
 		96088D912B7B220200E062FB /* GoodDayView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GoodDayView.swift; sourceTree = "<group>"; };
 		96088D932B7B286E00E062FB /* CalendarBadView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarBadView.swift; sourceTree = "<group>"; };
 		96088D952B7B300C00E062FB /* CalendarGoodView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarGoodView.swift; sourceTree = "<group>"; };
-		96088D972B7B37B400E062FB /* CustomSlider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomSlider.swift; sourceTree = "<group>"; };
+		96088D972B7B37B400E062FB /* BadSlider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BadSlider.swift; sourceTree = "<group>"; };
 		96088D992B7B39C300E062FB /* ExampleSliderView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ExampleSliderView.swift; sourceTree = "<group>"; };
+		96088D9B2B7B3D6800E062FB /* GoodSlider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GoodSlider.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -89,10 +91,10 @@
 				96088D652B797B7900E062FB /* Assets.xcassets */,
 				96088D8D2B7B1BF300E062FB /* BadDayView.swift */,
 				96088D872B7AFE7D00E062FB /* BadGoodView.swift */,
+				96088D972B7B37B400E062FB /* BadSlider.swift */,
 				96088D932B7B286E00E062FB /* CalendarBadView.swift */,
 				96088D952B7B300C00E062FB /* CalendarGoodView.swift */,
 				96088D632B797B7700E062FB /* ContentView.swift */,
-				96088D972B7B37B400E062FB /* CustomSlider.swift */,
 				96088D8F2B7B20FE00E062FB /* DayState.swift */,
 				96088D732B7980D700E062FB /* DynamicTypeAdaptiveView.swift */,
 				96088D792B79827D00E062FB /* ExampleFormBadView.swift */,
@@ -104,6 +106,7 @@
 				96088D752B7981DC00E062FB /* FlexibleSizingView.swift */,
 				96088D712B797FBA00E062FB /* FlipLayoutAxisView.swift */,
 				96088D912B7B220200E062FB /* GoodDayView.swift */,
+				96088D9B2B7B3D6800E062FB /* GoodSlider.swift */,
 				96088D672B797B7900E062FB /* Preview Content */,
 				96088D852B799B1400E062FB /* TextSizingView.swift */,
 			);
@@ -190,11 +193,12 @@
 			files = (
 				96088D9A2B7B39C300E062FB /* ExampleSliderView.swift in Sources */,
 				96088D762B7981DC00E062FB /* FlexibleSizingView.swift in Sources */,
-				96088D982B7B37B400E062FB /* CustomSlider.swift in Sources */,
+				96088D982B7B37B400E062FB /* BadSlider.swift in Sources */,
 				96088D962B7B300C00E062FB /* CalendarGoodView.swift in Sources */,
 				96088D742B7980D700E062FB /* DynamicTypeAdaptiveView.swift in Sources */,
 				96088D642B797B7700E062FB /* ContentView.swift in Sources */,
 				96088D622B797B7700E062FB /* AccessibilityTalkApp.swift in Sources */,
+				96088D9C2B7B3D6800E062FB /* GoodSlider.swift in Sources */,
 				96088D722B797FBA00E062FB /* FlipLayoutAxisView.swift in Sources */,
 				96088D822B79925200E062FB /* FlexibleSizingGoodUIView.swift in Sources */,
 				96088D8E2B7B1BF300E062FB /* BadDayView.swift in Sources */,

AccessibilityTalk/BadSlider.swift

@@ -1,5 +1,5 @@
 //
-//  CustomSlider.swift
+//  BadSlider.swift
 //  AccessibilityTalk
 //
 //  Created by Work on 2024-02-12.
@@ -7,13 +7,23 @@
 
 import SwiftUI
 
-struct CustomSlider: View {
+struct BadSlider: View {
     @Binding var value: Double
 
+    var range: ClosedRange<Double>
+
+    var step: Double
+
+    init(value: Binding<Double>, in range: ClosedRange<Double>? = nil, step: Double? = nil) {
+        _value = value
+        self.range = range ?? 0...1
+        self.step = step ?? 0.02
+    }
+
     var body: some View {
         HStack(spacing: 0) {
             Button {
-                value = max(0, value - 0.05)
+                value = max(range.lowerBound, value - step)
             } label: {
                 Image(systemName: "minus.circle")
                     .padding(8)
@@ -36,7 +46,7 @@ struct CustomSlider: View {
                 }
 
             Button {
-                value = min(1, value + 0.05)
+                value = min(range.upperBound, value + step)
             } label: {
                 Image(systemName: "plus.circle")
                     .padding(8)
@@ -47,5 +57,5 @@ struct CustomSlider: View {
 }
 
 #Preview {
-    CustomSlider(value: .constant(0.42))
+    BadSlider(value: .constant(0.42))
 }

AccessibilityTalk/ExampleSliderView.swift

@@ -14,17 +14,16 @@ struct ExampleSliderView: View {
 
     var body: some View {
         BadGoodView("Custom Slider") {
-            CustomSlider(value: $badValue)
+            BadSlider(value: $badValue)
         } good: {
-            CustomSlider(value: $goodValue)
+            GoodSlider(value: $goodValue)
-                .accessibilityRepresentation {
-                    Slider(value: $goodValue)
-                }
         }
 
     }
 }
 
 #Preview {
-    ExampleSliderView()
+    NavigationStack {
+        ExampleSliderView()
+    }
 }

AccessibilityTalk/GoodSlider.swift

@@ -0,0 +1,66 @@
+//
+//  GoodSlider.swift
+//  AccessibilityTalk
+//
+//  Created by Work on 2024-02-12.
+//
+
+import SwiftUI
+
+struct GoodSlider: View {
+    @Binding var value: Double
+
+    var range: ClosedRange<Double>
+
+    var step: Double
+
+    init(value: Binding<Double>, in range: ClosedRange<Double>? = nil, step: Double? = nil) {
+        _value = value
+        self.range = range ?? 0...1
+        self.step = step ?? 0.02
+    }
+
+    var body: some View {
+        HStack(spacing: 0) {
+            Button {
+                value = max(range.lowerBound, value - step)
+            } label: {
+                Image(systemName: "minus.circle")
+                    .padding(8)
+                    .contentShape(Rectangle())
+            }
+            .accessibilityHidden(true)
+
+            Rectangle()
+                .fill(Color(.systemGray3))
+                .clipShape(RoundedRectangle(cornerRadius: 4))
+                .frame(height: 8)
+                .frame(minWidth: 60)
+                .overlay {
+                    GeometryReader { geometry in
+                        Rectangle()
+                            .fill(Color.accentColor)
+                            .clipShape(RoundedRectangle(cornerRadius: 4))
+                            .frame(width: value * geometry.size.width, height: 8)
+                            .frame(maxWidth: .infinity, alignment: .leading)
+                    }
+                }
+                .accessibilityRepresentation {
+                    Slider(value: $value, in: range, step: step)
+                }
+
+            Button {
+                value = min(range.upperBound, value + step)
+            } label: {
+                Image(systemName: "plus.circle")
+                    .padding(8)
+                    .contentShape(Rectangle())
+            }
+            .accessibilityHidden(true)
+        }
+    }
+}
+
+#Preview {
+    GoodSlider(value: .constant(0.42))
+}