RangeSlider

A dual-handle numeric slider for a between bound on a numeric column (price, age, score, …). Like <DateRange> it owns two URL params — min_param / max_param (default name_min / name_max) — that your SQL reads.

A handle resting on its track bound writes an empty value (the same empty-means-all convention as every other filter), so guard each bound — the empty case (a wide-open slider, or the first fetch before the control seeds) then shows everything instead of erroring on CAST('' AS DOUBLE):

SELECT device, tier, price
FROM device_specs
WHERE ('${price_min}' = '' OR price >= CAST(${price_min} AS DOUBLE))
  AND ('${price_max}' = '' OR price <= CAST(${price_max} AS DOUBLE))
ORDER BY price DESC

Drag either handle — the chart re-queries. The readout above the track shows the live low/high, formatted with the same format=/currency= options the other components use.

Each handle substitutes as a quoted string literal (the one injection-safe path every filter shares), so the CAST(… AS DOUBLE) turns it back into a number for the comparison. The '${price_min}' = '' half of each clause is the empty-means-all guard — drag a handle back to its bound and that side stops filtering.

The default bounds #

default= seeds the initial [low, high] on first load (URL params still win). Write it as an array literal or a comma string — both clamp into [min, max]:

<RangeSlider name="price" min={0} max={10000} step={50} default={[2000,8000]} />
<RangeSlider name="price" min={0} max={10000} step={50} default="2000, 8000" />

Filter controls drive server-side SQL substitution, so they're stripped from static builds automatically.