Number Range Filter

A controlled number range picker with exact inputs, an optional slider, and explicit apply behavior.

Applied range: 500 to 2500

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/number-range-filter.json

Step-by-step guide

Create the range state

Import the value type and create optional state.

filters.svelte

Render the filter

Set boundaries to enable the slider. The value changes after Apply.

filters.svelte

Register the table filter

Use TanStack's inclusive filterFn_inNumberRange filter.

table.svelte.ts

Connect the column

Send the applied range to the column as a tuple.

filters.svelte

Inputs only

Hide the slider for exact input. Leave either field empty for an open-ended range.

Use one input for an open-ended range.

Behavior

Typed values move the slider on blur or Enter. A committed slider change updates the inputs. Invalid or reversed ranges cannot be applied.

Props

Number range filter props

NameTypeDefaultDescription
value
NumberRangeFilterValue | undefined undefined Bindable applied range.
onValueChange
(value) => void undefined Called after Apply or Clear.
title
string "Value" Trigger label.
placeholder
string "Any value" Text shown without a range.
min
number undefined Lowest allowed value.
max
number undefined Highest allowed value.
step
number 1 Input and slider increment.
showSlider
boolean true Shows the slider when min and max exist.
formatValue
(value: number) => string Intl.NumberFormat Formats displayed numbers.
locale
string "en-US" Default number format locale.
minimumText / maximumText
string "Minimum" / "Maximum" Input labels.
clearText / applyText
string "Clear" / "Apply" Action labels.
disabled
boolean false Disables the trigger.
open
boolean false Bindable popover state.
class / contentClass
string undefined Trigger and popover classes.

NumberRangeFilterValue

NameTypeDefaultDescription
min
number | undefined required Inclusive lower value.
max
number | undefined required Inclusive upper value.