Backpack-SwiftUI/Slider

Default

Day	Night

Usage

Regular Slider

                                                
                                                @State var value: Float = 0.5
                                                
                                                BPKSlider(value: $value, sliderBounds: 0...1)

Range Slider

                                                
                                                @State var value: ClosedRange<Float> = 0.25...0.75
                                                
                                                BPKRangeSlider(selectedRange: $value, sliderBounds: 0...1)

Listening to changes after the user has finished interacting with the slider

                                                
                                                BPKSlider(
                                                    value: $value,
                                                    sliderBounds: 0...1,
                                                    onDragEnded: { newValue in print("Slider value changed to \(newValue)") }
                                                )
                                                
                                                BPKRangeSlider(
                                                    selectedRange: $value,
                                                    sliderBounds: 0...1,
                                                    onDragEnded: { newRange in print("Slider range changed to \(newRange)") }
                                                )

Changing the step size

                                                
                                                @State var value: Float = 50
                                                @State var rangeValue: ClosedRange<Float> = 25...75
                                                
                                                BPKSlider(
                                                    value: $value,
                                                    sliderBounds: 0...100,
                                                    step: 10
                                                )
                                                BPKRangeSlider(
                                                    selectedRange: $rangeValue,
                                                    sliderBounds: 0...100,
                                                    step: 10
                                                )

Setting a minimum distance between the two thumbs

                                                
                                                @State var value: ClosedRange<Float> = 0...100
                                                
                                                BPKRangeSlider(
                                                    selectedRange: $value,
                                                    sliderBounds: 0...100,
                                                    minDistance: 20
                                                )

Accessibility labels for the thumbs

                                                
                                                @State var value: Float = 0
                                                @State var rangeValue: ClosedRange<Float> = 0...100
                                                
                                                BPKSlider(value: $value, sliderBounds: 0...100)
                                                    .accessibilityLabel("Volume")
                                                
                                                BPKRangeSlider(selectedRange: $rangeValue, sliderBounds: 0...100)
                                                    .leadingAccessibilityLabel("Min temperature")
                                                    .trailingAccessibilityLabel("Max temperature")

Adding Thumbnail Labels over the thumbs

                                                
                                                @State var rangeValue: ClosedRange<Float> = 0...100
                                                
                                                BPKRangeSlider(
                                                    selectedRange: $rangeValue,
                                                    sliderBounds: -20...20,
                                                    thumbnailLabels: .init(
                                                        lowerThumbnail: "BPK",
                                                        upperThumbnail: "OK"
                                                        )
                                                    )