> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Filter Numeric Range
> Lets users refine results between two numeric values using a slider.
export const FlavorSwitcher = ({current, baseHref = "", options = [], label = "InstantSearch framework"}) => {
if (options.length === 0) {
return
FlavorSwitcher requires at least one option.
;
}
const selected = options.find(option => option.value === current) ?? options[0];
return ;
};
```swift Signature theme={"system"}
NumberRangeConnector(
filterState: FilterState,
attribute: Attribute,
bounds: ClosedRange?,
range: ClosedRange,
operator: RefinementOperator,
groupName: String?,
controller: NumberRangeController
)
```
Browse the Filter Numeric Range example code on GitHub.
## About this widget
`Filter Numeric Range` is a filtering component made to filter between two numeric values.
The most common interface for this is a slider.
## Examples
Instantiate a `NumberRangeConnector` and launch an initial search on its searcher.
```swift Swift icon=code theme={"system"}
let searcher = HitsSearcher(appID: "YourApplicationID",
apiKey: "YourApiKey",
indexName: "YourIndexName")
let filterState: FilterState = .init()
let numberRangeController: RangeSliderController = .init(rangeSlider: .init())
let numericRangeConnector: NumberRangeConnector = .init(searcher: searcher,
filterState: filterState,
attribute: "price",
controller: numberRangeController)
searcher.search()
```
## Parameters
The [`Searcher`](/doc/api-reference/widgets/instantsearch/ios) that handles your searches.
The [`FilterState`](/doc/api-reference/widgets/filter-state/ios) that holds your filters.
The attribute to filter.
The logic applied to the numeric range.
The nounds limiting the max and the min value of the range.
The initial range value.
Whether the filter is added to a conjuncitve(`and`) or a disjuncitve (`or`) group in the filter state.
Filter group name in the [`FilterState`](/doc/api-reference/widgets/filter-state/ios)
The Controller interfacing with a concrete number range view.
## Low-level API
If you want to fully control the `Filter Numeric Range` components and connect them manually, you can use the following components:
* `Searcher`. The [`Searcher`](/doc/api-reference/widgets/instantsearch/ios) that handles your searches.
* `FilterState`. The current state of the filters.
* `NumberRangeInteractor`. The logic applied to the numeric ranges.
* `NumberRangeController`. The controller that interfaces with a concrete numeric range view.
```swift Swift icon=code theme={"system"}
let searcher = HitsSearcher(appID: "YourApplicationID",
apiKey: "YourApiKey",
indexName: "YourIndexName")
let filterState: FilterState = .init()
let numericRangeInteractor: NumberRangeInteractor = .init()
let numberRangeController: RangeSliderController = .init(rangeSlider: .init())
let priceAttribute: Attribute = "price"
searcher.connectFilterState(filterState)
numericRangeInteractor.connectFilterState(filterState, attribute: priceAttribute)
numericRangeInteractor.connectSearcher(searcher, attribute: priceAttribute)
numericRangeInteractor.connectController(numberRangeController)
searcher.search()
```
## Customizing your view
If you want to use a third-party input view,
or you want to introduce some custom behavior to the already provided UIKit component,
you can create your own controller conforming to the `NumberRangeController` protocol.
### Protocol
`func setBounds(_ bounds: ClosedRange)`:
Function called when the minimum and maximum of numeric filter view have been defined.
`var onRangeChanged: ((ClosedRange) -> Void)?`
Closure to call when new bounds is set for the numeric range filter.
### Example
Suppose you have a range slider control providing the following API:
```swift Swift icon=code theme={"system"}
class RangeSlider: UIControl {
var lowerValue: Double
var upperValue: Double
var minimumValue: Double
var maximumValue: Double
}
```
Then, you could implement the `NumberRangeController` including this control as follows:
```swift Swift icon=code theme={"system"}
class RangeSliderController: NumberRangeController {
let rangeSlider: RangeSlider
var onRangeChanged: ((ClosedRange) -> Void)?
func setBounds(_ bounds: ClosedRange) {
rangeSlider.minimumValue = bounds.lowerBound
rangeSlider.maximumValue = bounds.upperBound
setItem(bounds)
}
func setItem(_ item: ClosedRange) {
rangeSlider.lowerValue = item.lowerBound
rangeSlider.upperValue = item.upperBound
}
init(rangeSlider: RangeSlider) {
self.rangeSlider = rangeSlider
rangeSlider.addTarget(self, action: #selector(onValueChanged(sender:)), for: [.touchUpInside, .touchUpOutside])
}
@objc func onValueChanged(sender: RangeSlider) {
onRangeChanged?(sender.lowerValue...sender.upperValue)
}
}
```
### SwiftUI
InstantSearch provides the `NumberRangeObservableController` data model,
which is an implementation of the `NumberRangeController` protocol adapted for usage with SwiftUI.
`NumberRangeObservableController` must be connected to the `NumberRangeConnector` or `NumberRangeConnector` like any other `NumberRangeController` implementation.
The example of the number range view using two `Stepper` components provided by SwiftUI.
```swift Swift icon=code theme={"system"}
struct ContentView: View {
@ObservedObject var numberRangeController: NumberRangeObservableController
var body: some View {
let range = numberRangeController.range
VStack{
Stepper(onIncrement: {
if let range = makeRange(range.lowerBound+1, range.upperBound) {
numberRangeController.range = range
}
},
onDecrement: {
if let range = makeRange(range.lowerBound-1, range.upperBound) {
numberRangeController.range = range
}
},
label: {
Text("Lower bound: \(range.lowerBound)")
})
Stepper(onIncrement: {
if let range = makeRange(range.lowerBound, range.upperBound+1) {
numberRangeController.range = range
}
},
onDecrement: {
if let range = makeRange(range.lowerBound, range.upperBound-1) {
numberRangeController.range = range
}
},
label: {
Text("Upper bound: \(numberRangeController.range.upperBound)")
})
}
}
func makeRange(_ lowerBound: Int, _ upperBound: Int) -> ClosedRange? {
if lowerBound < upperBound &&
numberRangeController.bounds.contains(lowerBound) &&
numberRangeController.bounds.contains(upperBound) {
return lowerBound...upperBound
} else {
return nil
}
}
}
```
If you prefer to create a custom SwiftUI view that presents the numeric range,
you can directly use the `NumberRangeObservableController` as a data model.
It provides `range` and `bounds` properties to streamline the design process of your custom SwiftUI view.