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

Import the value type and create optional state.

filters.svelte

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

filters.svelte

Use TanStack's inclusive filterFn_inNumberRange filter.

table.svelte.ts

Send the applied range to the column as a tuple.

filters.svelte

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

Use one input for an open-ended range.

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

Name	Type	Default	Description
`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.`

Name	Type	Default	Description
`min`	`number \| undefined`	`required`	`Inclusive lower value.`
`max`	`number \| undefined`	`required`	`Inclusive upper value.`