Dual Number Input

Paired numeric input for linked values like width and height.

Import/Installation

import { DualNumberInput } from "@lottiefiles/creator-plugins-ui";

Preview

Usage

<DualNumberInput value1={width} value2={height} onChange1={setWidth} onChange2={setHeight} label1="W" label2="H" />

Props

PropTypeDefaultRequiredDescription
value1number—YesFirst value (e.g. width).
value2number—YesSecond value (e.g. height).
onChange1(value: number) => void—YesCallback when first value changes.
onChange2(value: number) => void—YesCallback when second value changes.
label1string"X"NoLabel for first input (e.g. "W").
label2string"Y"NoLabel for second input (e.g. "H").
minnumber—NoMinimum value for both inputs.
maxnumber—NoMaximum value for both inputs.
stepnumber1NoStep increment for both inputs.
suffixstring—NoUnit suffix to display after the number (e.g. "px", "s", "%").
decimalsnumber—NoNumber of decimal places to show.
dragSensitivitynumber0.5NoSensitivity multiplier for drag changes.
size"sm" | "default" | "lg""default"NoOverall control height.
disabledboolean—NoDisabled state.
Last updated: September 11, 2026 at 12:08 PMEdit this page