Parserparamsync > parsers

parseAsNumberRange

Composite parser for dual-thumb numeric sliders, price spans, and min/max boundaries.

TSTypeScript Signature

IntelliSense

parseAsNumberRange(defaultMin: number, defaultMax: number, separator?: string): ParserWithDefault<NumberRange>

What it does

Serializes and deserializes a `{ min: number, max: number }` object into a compact hyphenated string (e.g. `?price=50-250`). Automatically purges the parameter when the range matches default boundaries.

Best For

Dual-thumb price range sliders ($0 - $1000)
Year production filters (?year=1990-2024)
Dimensions and square footage boundaries
Salary and hourly compensation ranges

How to use it properly

Import parseAsNumberRange from 'paramsync' and bind it to useQueryState:

TSExample.tsx

'use client';
 
import { useQueryState, parseAsNumberRange } from 'paramsync';
 
export function PriceRangeFilter() {
  const [price, setPrice] = useQueryState(
    'price',
    parseAsNumberRange(0, 1000)
  );
 
  return (
    <div className="space-y-2">
      <div className="flex justify-between text-xs font-mono text-zinc-400">
        <span>${price.min}</span>
        <span>${price.max}</span>
      </div>
      <input
        type="range"
        min={0}
        max={1000}
        value={price.max}
        onChange={(e) =>
          setPrice((prev) => ({ ...prev, max: Number(e.target.value) }))
        }
        className="w-full accent-blue-600 bg-zinc-800"
      />
    </div>
  );
}

main|paramsync

TypeScript JSX|UTF-8|Ln 29, Col 1

Clean URL Behavior

When slider is set to full bounds (min === defaultMin && max === defaultMax), parameter is deleted.

State Condition	Clean URL Action	Resulting URL
price === { min: 0, max: 1000 } (defaults)	Key removed from URL	https://example.com/catalog
price === { min: 100, max: 500 }	Serialized as `?price=100-500`	https://example.com/catalog?price=100-500

Configuration Parameters

Parameter	Type	Default	Description
defaultMin	number	-	Lower boundary fallback and clean URL baseline.
defaultMax	number	-	Upper boundary fallback and clean URL baseline.
separator	string	"-"	Delimiter character between min and max. Defaults to hyphen `-`.

Related API References

parseAsInteger parseAsArray