Number-range filter

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

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

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

import {
  defineFilters,
  defineResource,
  filters,
  section,
} from '@backlit/sdk'

const properties = defineResource('properties', [])
const propertyFilters = defineFilters([
  filters.numberRange('price', {
    min: 0,
    max: 50_000_000,
    step: 100_000,
  }),
])

properties.view(
  'list',
  { filters: propertyFilters },
  (_ctx, view) =>
    section('Properties').setFilters(view.state.filters)
)

export default properties

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "properties",
    "name": "list",
    "slots": {
      "content": [
        {
          "kind": "section",
          "title": "Properties",
          "slots": {
            "content": [],
            "filters": {
              "kind": "filters",
              "resource": "properties",
              "view": "list",
              "keyword": "f",
              "definesResult": true,
              "dependsOnResult": false,
              "filters": [
                {
                  "kind": "number-range",
                  "name": "price",
                  "label": "",
                  "min": 0,
                  "max": 50000000,
                  "step": 100000
                }
              ]
            }
          }
        }
      ]
    }
  }
}