Drag Number
Web (React)
A compact number chip you scrub sideways to change, with a rubber-band edge and a delta tag.
Labels sit in mono caps on a muted chip; the fill and change tag follow your theme's primary colour. Hold Shift for coarse steps, Alt for fine ones, or click to type a value.
Weight42pt
Leading140%
Tracking0.02em
Installation
CLI
npx @modus-ui/cli add drag-numberManual
- Copy the code from the component tab.
- Create a file at
components/ui/drag-number.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Weight" | Caption on the chip. |
| suffix | string | "pt" | Unit after the value. |
| value | any | - | Controlled value. |
| defaultValue | number | 42 | Initial value; also the clean value for the dirty dot. |
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Change per step. |
| size | string | "md" | Size: "sm", "md" or "lg". |
| sensitivity | number | 2 | Pixels of drag per step. |
| rubberReach | number | 8 | Furthest stretch past a limit, in pixels. |
| returnDuration | number | 300 | Spring back duration in milliseconds. |
| coarseMultiplier | number | 10 | Step multiplier while Shift is held. |
| fineMultiplier | number | 0.1 | Step multiplier while Alt is held. |
| showDelta | boolean | true | Shows the change while dragging. |
| showDirty | boolean | true | Marks a value that differs from the default. |
| showFill | boolean | true | Shows the value as a fill. |
| accent | string | "hsl(var(--primary))" | Fill, delta and dot colour. |
| chipColor | string | "hsl(var(--muted))" | Chip background. |
| disabled | boolean | false | Disables the chip. |
| onChange | any | - | Called with each new value. |
| onCommit | any | - | Called when a drag, key step or typed value lands. |
Comments