> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# FilterList (numeric)

> Shows a list of numeric filter options for refining search results.

<div className="not-prose algolia-flavor-switcher">
  <div className="afs-dropdown">
    <div className="afs-trigger" role="button" tabIndex="0" aria-haspopup="listbox">
      <span className="afs-current">Android</span>

      <svg className="afs-chevron lucide lucide-chevron-down" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6" />
      </svg>
    </div>

    <ul className="afs-menu" role="listbox">
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/filter-list-numeric/ios"><span className="afs-option-name">iOS</span><span className="afs-option-lib">InstantSearch iOS</span></a></li>
      <li role="option" aria-selected="true"><a className="afs-option is-current" href="/doc/api-reference/widgets/filter-list-numeric/android"><span className="afs-option-name">Android</span><span className="afs-option-lib">InstantSearch Android</span></a></li>
    </ul>
  </div>
</div>

```kotlin Signature theme={"system"}
FilterListConnector.Numeric(
    filters: List<Filter.Numeric>,
    filterState: FilterState,
    selectionMode: SelectionMode,
    groupID: FilterGroupID
)
```

<Card title="Explore example code" icon="github" href="https://github.com/algolia/instantsearch-android/tree/master/examples/android">
  Browse the FilterList (numeric) example code on GitHub.
</Card>

## About this widget

`FilterList.Numeric` is a filtering view that displays any kind of [numeric filters](/doc/api-reference/api-parameters/numericFilters) and lets users refine the search results by selecting them.

Compared to the [`RefinementList`](/doc/api-reference/widgets/refinement-list/android),
which takes its values from the search response facets, this widget displays numeric filters that you add yourself.

## Examples

```kotlin Kotlin icon=code theme={"system"}
import com.algolia.instantsearch.filter.Filter

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = "YourApplicationID",
        apiKey = "YourSearchOnlyAPIKey",
        indexName = "YourIndexName"
    )
    val filterState = FilterState()
    val price = "price"
    val groupColor = groupAnd(price)
    val numericFilters = listOf(
        Filter.Numeric(price, NumericOperator.Less, 5),
        Filter.Numeric(price, 5..10),
        Filter.Numeric(price, 10..25),
        Filter.Numeric(price, 25..100),
        Filter.Numeric(price, NumericOperator.Greater, 100)
    )
    val filterListConnector = FilterListConnector.Numeric(
        filters = numericFilters,
        filterState = filterState,
        groupID = groupColor
    )
    val connection = ConnectionHandler(filterListConnector, searcher.connectFilterState(filterState))

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val filterListView: FilterListView.Numeric = MyFilterListNumericAdapter() // your `FilterListView.Numeric` implementation
        connection += filterListConnector.connectView(filterListView)
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        connection.disconnect()
        searcher.cancel()
    }
}
```

### Low-level API

If you want to fully control the `FilterList.Numeric` components and connect them manually, use the following components:

* `Searcher`. The [`Searcher`](/doc/api-reference/widgets/instantsearch/android) that handles your searches.
* `FilterState`. The current state of the filters.
* `FilterListViewModel.Numeric`. The logic applied to the numeric filters.
* `FilterListView.Numeric`. The view that renders the numeric filters.
* `FilterPresenter`. Optional. The presenter to customize the display of the filters.

```kotlin Kotlin icon=code theme={"system"}
import com.algolia.instantsearch.filter.Filter

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = "YourApplicationID",
        apiKey = "YourSearchOnlyAPIKey",
        indexName = "YourIndexName"
    )
    val filterState = FilterState()
    val price = "price"
    val filters = listOf(
        Filter.Numeric(price, NumericOperator.Less, 5),
        Filter.Numeric(price, 5..10),
        Filter.Numeric(price, 10..25),
        Filter.Numeric(price, 25..100),
        Filter.Numeric(price, NumericOperator.Greater, 100)
    )
    val viewModel = FilterListViewModel.Numeric(filters)
    val connection = ConnectionHandler()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val view: FilterListView.Numeric = MyFilterListNumericAdapter() // your `FilterListView.Numeric` implementation
        connection += searcher.connectFilterState(filterState)
        connection += viewModel.connectFilterState(filterState)
        connection += viewModel.connectView(view)

        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        connection.disconnect()
        searcher.cancel()
    }
}
```

### Compose UI

InstantSearch provides the `FilterListState` as a state model, which is an implementation of the `FilterListView` interface.
You need to connect `FilterListState` to the `FilterListConnector` or `FilterListViewModel` like any other `FilterListView` implementation.

```kotlin Kotlin icon=code theme={"system"}
import com.algolia.instantsearch.filter.Filter

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = "YourApplicationID",
        apiKey = "YourSearchOnlyAPIKey",
        indexName = "YourIndexName"
    )
    val filterState = FilterState()
    val price = "price"
    val groupColor = groupAnd(price)
    val numericFilters = listOf(
        Filter.Numeric(price, NumericOperator.Less, 5),
        Filter.Numeric(price, 5..10),
        Filter.Numeric(price, 10..25),
        Filter.Numeric(price, 25..100),
        Filter.Numeric(price, NumericOperator.Greater, 100)
    )
    val filterListState = FilterListState<Filter.Numeric>()
    val filterListConnector = FilterListConnector.Numeric(
        filters = numericFilters,
        filterState = filterState,
        groupID = groupColor
    )
    val connections = ConnectionHandler(filterListConnector)

    init {
        connections += searcher.connectFilterState(filterState)
        connections += filterListConnector.connectView(filterListState)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            filterListState.items.forEach { selectableFacet ->
                FilterRow( // your own UI composable to display `SelectableItem<Filter.Numeric>`
                    selectableFilter = selectableFacet,
                    onClick = { filterListState.onSelection?.invoke(it) }
                )
            }
        }
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        connections.disconnect()
        searcher.cancel()
    }
}
```

## Parameters

<ParamField body="filters" type="List<Filter.Numeric>" required>
  The numeric filters to display.
</ParamField>

<ParamField body="filterState" type="FilterState" required>
  The [`FilterState`](/doc/api-reference/widgets/filter-state/android) that will hold your filters.
</ParamField>

<ParamField body="selectionMode" type="SelectionMode" post={["default: Single"]}>
  Whether the list can have `Single` or `Multiple` selections.
</ParamField>

<ParamField body="groupID" type="FilterGroupID" post={["default: FilterGroupID(FilterOperator.And)"]}>
  The identifier for the group of filters.
</ParamField>

## View

<ParamField body="view" type="FilterListView.Numeric">
  The view that renders the filters.

  ```kotlin Kotlin icon=code theme={"system"}
  import com.algolia.instantsearch.filter.Filter

  val view: FilterListView.Numeric = MyFilterListNumericAdapter()
  filterListConnector.connectView(view)

  // Example of `FilterListView.Numeric` implementation
  class MyFilterListNumericAdapter : FilterListView.Numeric,
      ListAdapter<SelectableItem<Filter.Numeric>, FilterListViewHolder>(DiffUtilItem()) {
      override var onSelection: Callback<Filter.Numeric>? = null
      override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FilterListViewHolder {
          return FilterListViewHolder(parent.inflate(R.layout.list_item_selectable))
      }

      override fun onBindViewHolder(holder: FilterListViewHolder, position: Int) {
          val (filter, selected) = getItem(position)
          holder.bind(FilterPresenterImpl()(filter), selected) { onSelection?.invoke(filter) }
      }

      override fun setItems(items: List<SelectableItem<Filter.Numeric>>) {
          submitList(items)
      }
  }

  class DiffUtilItem<T : Filter> : DiffUtil.ItemCallback<SelectableItem<T>>() {
      override fun areItemsTheSame(oldItem: SelectableItem<T>, newItem: SelectableItem<T>): Boolean {
          return oldItem.first == newItem.first
      }

      override fun areContentsTheSame(oldItem: SelectableItem<T>, newItem: SelectableItem<T>): Boolean {
          return oldItem == newItem
      }
  }
  ```
</ParamField>