InputRange

Slider for selecting a numeric value on a continuous range between min and max. Supports labeled marks, a colored gradient, and a disabled state.

When to use

✅ Use when…	🚫 Avoid when…
Price, volume, or term filters where the user has a sense of the range, not the exact value. Settings whose valid interval is known a priori.	For exact values (e.g. age, item quantity). Use `Input` with `type="number"`. When precision matters a lot and the user cannot drag with accuracy — pair the `InputRange` with a numeric field next to it.

<InputRange min={0} max={200} value={50} onChange={setValue} />

Step 0

Step 20

Step 40

Step 60

Step 80

Step 100

Step 60

<InputRange mark markLabel step={20} getLabelValue={(n) => `Step ${n}`} />

0 ℃

20 ℃

40 ℃

60 ℃

80 ℃

100 ℃

60 ℃

<InputRange gradient mark markLabel step={20} getLabelValue={(n) => `${n} ℃`} />


Prop	Type	Default	Description
`disabled`	`boolean`	—	—
`getLabelValue`	`((n: number) => string)`	—	—
`gradient`	`boolean`	—	—
`mark`	`boolean`	—	—
`markLabel`	`boolean`	—	—
`max`	`number`	`100`	—
`min`	`number`	`0`	—
`onChange`	`((v: number) => void)`	—	—
`step`	`number`	`1`	—
`value`	`number`	`50`	—

In addition to the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.