---
title: Number-range filter
description: Filter between two numbers on a declared scale.
---

A number-range filter accepts a lower end, an upper end, or both, on a scale the
declaration sets with `min` and `max`. The control is a slider with a thumb per
end and a number input under each, so a value that is hard to reach with a thumb
can be typed.

The URL value uses `<from>..<to>`. For example, `1000000..5000000` is a closed
range. `1000000..` has no upper end, and `..5000000` has no lower end. Backlit
ignores a side that is not a number, a range in reverse order, and a side outside
the bounds.

## API

```ts
filters.numberRange(name: string, options: { min: number; max: number; step?: number }): NumberRangeFilterBuilder
```

| Method     | Input    | Result                         |
| ---------- | -------- | ------------------------------ |
| `setLabel` | `string` | Sets the filter-control label. |

`min` must be below `max`, and `step`, when given, must be above zero. Backlit
throws at declaration otherwise. Without `step`, a thumb moves by one.

The parsed value is `{ from?: number; to?: number }` with at least one end.

## Basic number-range filter

<BacklitExample path="filters/number_range/basic" view="list" />