Kinetic

MIT Demo GitHub

Live playground for the scrub number field. Adjust settings, then copy the generated usage snippet.

Demo

Input

Select all on edit

Logo scroll

Wheel scroll

Direction

Sensitivity

0.00

Threshold

Limits

Start

End

Bound feedback

Keyboard nudge

Step

Fine step

0.0

Fine modifier

Coarse step

Coarse modifier

animation by Calligraph

Variant

Animation

Stagger

0.000

Auto-size

Props

"use client"

import { useState } from "react"
import { ScrubNumberField } from "@/components/ui/scrub-number-input"
import "@/components/ui/scrub-number-input.css"

export function Example() {
  const [value, setValue] = useState(0)

  return (
    <ScrubNumberField
      aria-label="Value"
      value={value}
      onValueChange={setValue}
    />
  )
}

Drag to scrub, click to type. Arrow keys, wheel, and drag share the same step ladder; use the fine and coarse modifier keys for smaller or larger steps. Double-click or fine-modifier+click resets to zero.