Modus UI

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
Modus / Drag Number

Installation

CLI

npx @modus-ui/cli add drag-number

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/drag-number.tsx.
  3. Paste the code.

Usage

tsx
import { DragNumber } from "@/components/ui/drag-number";

export default function Example() {
  return <DragNumber />;
}

Props

PropTypeDefaultDescription
labelstring"Weight"Caption on the chip.
suffixstring"pt"Unit after the value.
valueany-Controlled value.
defaultValuenumber42Initial value; also the clean value for the dirty dot.
minnumber0Lowest value.
maxnumber100Highest value.
stepnumber1Change per step.
sizestring"md"Size: "sm", "md" or "lg".
sensitivitynumber2Pixels of drag per step.
rubberReachnumber8Furthest stretch past a limit, in pixels.
returnDurationnumber300Spring back duration in milliseconds.
coarseMultipliernumber10Step multiplier while Shift is held.
fineMultipliernumber0.1Step multiplier while Alt is held.
showDeltabooleantrueShows the change while dragging.
showDirtybooleantrueMarks a value that differs from the default.
showFillbooleantrueShows the value as a fill.
accentstring"hsl(var(--primary))"Fill, delta and dot colour.
chipColorstring"hsl(var(--muted))"Chip background.
disabledbooleanfalseDisables the chip.
onChangeany-Called with each new value.
onCommitany-Called when a drag, key step or typed value lands.

Comments

  • No comments yet.