# Dual Number Input
Paired numeric input for linked values like width and height.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { DualNumberInput } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/dual-number-input
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=dualnumberinput--basic&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="214" title="Dual Number Input component live preview" frameBorder="no" loading="lazy" />

## Usage

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

## Props

<PropsTable
  props={[
  {
    name: "value1",
    type: "number",
    required: true,
    description: "First value (e.g. width).",
  },
  {
    name: "value2",
    type: "number",
    required: true,
    description: "Second value (e.g. height).",
  },
  {
    name: "onChange1",
    type: "(value: number) => void",
    required: true,
    description: "Callback when first value changes.",
  },
  {
    name: "onChange2",
    type: "(value: number) => void",
    required: true,
    description: "Callback when second value changes.",
  },
  {
    name: "label1",
    type: "string",
    default: '"X"',
    description: 'Label for first input (e.g. "W").',
  },
  {
    name: "label2",
    type: "string",
    default: '"Y"',
    description: 'Label for second input (e.g. "H").',
  },
  {
    name: "min",
    type: "number",
    description: "Minimum value for both inputs.",
  },
  {
    name: "max",
    type: "number",
    description: "Maximum value for both inputs.",
  },
  {
    name: "step",
    type: "number",
    default: "1",
    description: "Step increment for both inputs.",
  },
  {
    name: "suffix",
    type: "string",
    description: 'Unit suffix to display after the number (e.g. "px", "s", "%").',
  },
  {
    name: "decimals",
    type: "number",
    description: "Number of decimal places to show.",
  },
  {
    name: "dragSensitivity",
    type: "number",
    default: "0.5",
    description: "Sensitivity multiplier for drag changes.",
  },
  {
    name: "size",
    type: '"sm" | "default" | "lg"',
    default: '"default"',
    description: "Overall control height.",
  },
  {
    name: "disabled",
    type: "boolean",
    description: "Disabled state.",
  },
]}
/>