How to link two min max sliders with swiftui iOS15

user_17081913 0
Viewed 83

Image: Sliders

I have two sliders to filter the results. One of the sliders sets minimum value another sets maximum value. Filters work properly, except min value can be increased to a value more than max and max can be lowered below min.

How can I link these sliders so that min does not exceed max and max does not go below min?

Here is the code:

@State private var minimum: Double = 98.0
@State private var maximum: Double = 1000000.0

var filteredProducts: [Product]

var body: some View {
    List {
        Section(header: Text("Filters")){
            DisclosureGroup("Price range") {
                Slider(value: $minimum, in: 98...1000000) {
                    Text("\(minimum)")
                } minimumValueLabel: {
                    Text("min")
                } maximumValueLabel: {
                    Text("\(minimum, specifier: "%.0f")")
                }
                
                Slider(value: $maximum, in: 98...1000000) {
                    Text("\(maximum)")
                } minimumValueLabel: {
                    Text("max")
                } maximumValueLabel: {
                    Text("\(maximum, specifier: "%.0f")")
                }
            }
        }
    }
}

var slideresults: [Product] {
    if minimum == 0 && maximum == 1000000000.0 {
        return filteredProducts
    } else {
        return filteredProducts.filter {
            $0.price > minimum &&
            $0.price < maximum
        }
    }
}
max slider min
1 Answers

I see you asked it a long time ago, hope still this can help.

I had the same problem and this is how I solved it. (showing on your code)

@State private var minimum: Double = 98.0
@State private var maximum: Double = 1000000.0

var filteredProducts: [Product]

var body: some View {
    List {
        Section(header: Text("Filters")){
            DisclosureGroup("Price range") {
                Slider(value: $minimum, in: 98...maximum) {
                    Text("\(minimum)")
                } minimumValueLabel: {
                    Text("min")
                } maximumValueLabel: {
                    Text("\(maximum, specifier: "%.0f")")
                }
                
                Slider(value: $maximum, in: minimum...1000000) {
                    Text("\(maximum)")
                } minimumValueLabel: {
                    Text("\(minimum, specifier: "%.0f")
                } maximumValueLabel: {
                    Text("\(maximum, specifier: "%.0f")")
                }
            }
        }
    }
}

Basically, give your Min value Slider your @state max value and vice versa for the Max value Slider. And put corresponding labels: max value label to min value slider and vice versa.

user_84525830
Related