Range Slider

Range Slider

MoreUI adds a two-handle slider, but for selecting a closed interval of values, rather than just a value in and of itself. The syntax if mostly identical to Slider. It accepts either a ClosedRange as interval or separate lower and upper bounds as lower and upper, respectively. See here for a video demonstrations of the sample implementation below.

struct ContentView: View {
    @State var interval: ClosedRange<CGFloat> = 25...75
    
    var body: some View {
        RangeSlider(interval: $interval,
                    in: 0...100,
                    step: 10) {
            Label("Label", systemImage: "circle.hexagongrid.fill")
                .symbolRenderingMode(.multicolor)
        } minimumValueLabel: {
            Text("0")
        } maximumValueLabel: {
            Text("100")
        } onEditingChanged: { isEditing in
            didEditingChange(isEditing)
        }
        .padding(.horizontal)
    }
    
    func didEditingChange(_ isEditing: Bool) {
        // Handle editing change.
    }
}