BêtaConstruit sur l’UI SDK 0.1.0-beta.2 de Vercel. Son API peut changer.

Number input

Un champ numérique sur l’UI SDK de Vercel avec des boutons qui se répètent au maintien, des formats monétaires, de pourcentage et d’unité dans toute langue, et une poignée à faire glisser.

Composants de formulaire
8 parties
13 exemples
Mis à jour le 14 nov. 2026

Dépend de

@tabler/icons-react
@ui-sdk/core
@ui-sdk/react
class-variance-authority

Quantity

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
  NumberInputScrubArea,
  NumberInputScrubAreaCursor,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputDemo() {
  return (
    <NumberInput defaultValue={1} min={1} max={99} className="max-w-36">
      <NumberInputScrubArea pixelsPerStep={6}>
        <Label htmlFor="demo-quantity">Quantity</Label>
        <NumberInputScrubAreaCursor />
      </NumberInputScrubArea>
      <NumberInputGroup>
        <NumberInputDecrement />
        <NumberInputControl id="demo-quantity" />
        <NumberInputIncrement />
      </NumberInputGroup>
    </NumberInput>
  )
}

export { UiSdkNumberInputDemo }

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-number-input.json

Ajoute le composant, les tokens de thème HextaUI et les composants HextaUI dont il dépend.

Ajoutez les tokens de thème à votre CSS global, si ce n’est pas déjà fait.

Installez les dépendances.

pnpm add @ui-sdk/react@0.1.0-beta.2 @ui-sdk/core@0.1.0-beta.2 @tabler/icons-react class-variance-authority cn

3
Copiez et collez le code suivant dans votre projet.
components/ui/ui-sdk-number-input.tsx
"use client" import * as React from "react" import { IconChevronDown, IconChevronUp, IconMinus, IconPlus,
Mettez à jour les chemins d’import selon la configuration de votre projet.

UI SDK ajoute un peu de CSS dans une couche de cascade nommée ui-sdk. Déclarez cette couche en haut de votre feuille de style globale, au-dessus de l’import Tailwind, pour que vos classes l’emportent.

@layer ui-sdk;

@import "tailwindcss";

import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

<NumberInput defaultValue={1} min={0}>
  <NumberInputGroup>
    <NumberInputDecrement />
    <NumberInputControl aria-label="Quantity" />
    <NumberInputIncrement />
  </NumberInputGroup>
</NumberInput>

La valeur est un nombre, ou null quand le champ est vide, et le champ l’affiche formatée. La saisie met à jour la valeur dès que le texte est un nombre valide. Entrée ou la sortie du champ la valide : le texte est lu, maintenu entre min et max, aligné sur le pas et reformaté.

Composition

NumberInput
├── NumberInputScrubArea
│   └── NumberInputScrubAreaCursor
└── NumberInputGroup
    ├── NumberInputDecrement
    ├── NumberInputControl
    ├── NumberInputIncrement
    └── NumberInputStepper
        ├── NumberInputIncrement
        └── NumberInputDecrement

Exemples

Minimum et maximum

Ouvrir l’exemple

Un bouton se désactive à sa limite. Une valeur saisie hors limites est ramenée dedans à la validation.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputMinMax() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="guests">Guests</Label>
      <NumberInput defaultValue={2} min={1} max={8}>
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="guests" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">
        Tables seat 1 to 8 guests.
      </p>
    </div>
  )
}

export { UiSdkNumberInputMinMax }

Étape

Ouvrir l’exemple

step est l’incrément habituel. Maj, Page préc. et Page suiv. modifient de largeStep, et Alt ou Option avec une flèche de smallStep. Maintenez un bouton pour répéter.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputStep() {
  return (
    <div className="grid w-full max-w-sm grid-cols-2 gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor="temperature">Temperature</Label>
        <NumberInput
          defaultValue={0.7}
          min={0}
          max={2}
          step={0.1}
          largeStep={0.5}
          smallStep={0.01}
        >
          <NumberInputGroup>
            <NumberInputDecrement />
            <NumberInputControl id="temperature" />
            <NumberInputIncrement />
          </NumberInputGroup>
        </NumberInput>
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="max-tokens">Max tokens</Label>
        <NumberInput
          defaultValue={4096}
          min={256}
          max={32768}
          step={256}
          largeStep={4096}
        >
          <NumberInputGroup>
            <NumberInputDecrement />
            <NumberInputControl id="max-tokens" />
            <NumberInputIncrement />
          </NumberInputGroup>
        </NumberInput>
      </div>
    </div>
  )
}

export { UiSdkNumberInputStep }

Devise, pourcentage et unités

Ouvrir l’exemple

format accepte les options de Intl.NumberFormat. On peut saisir dans le même format, et un pourcentage est une fraction, donc 15 % vaut 0.15. Le groupe variant="stacked" place de petits chevrons à la fin.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
  NumberInputStepper,
} from "@/components/ui/ui-sdk-number-input"

const fields = [
  {
    id: "price",
    label: "Price",
    defaultValue: 19.99,
    step: 0.01,
    format: { style: "currency", currency: "USD" },
  },
  {
    id: "discount",
    label: "Discount",
    defaultValue: 0.15,
    step: 0.01,
    format: { style: "percent" },
  },
  {
    id: "weight",
    label: "Weight",
    defaultValue: 2.5,
    step: 0.1,
    format: { style: "unit", unit: "kilogram" },
  },
] satisfies {
  id: string
  label: string
  defaultValue: number
  step: number
  format: Intl.NumberFormatOptions
}[]

function UiSdkNumberInputFormat() {
  return (
    <div className="flex w-full max-w-44 flex-col gap-4">
      {fields.map(({ id, label, ...options }) => (
        <div key={id} className="flex flex-col gap-2">
          <Label htmlFor={id}>{label}</Label>
          <NumberInput {...options} min={0} locale="en-US">
            <NumberInputGroup variant="stacked">
              <NumberInputControl id={id} />
              <NumberInputStepper>
                <NumberInputIncrement />
                <NumberInputDecrement />
              </NumberInputStepper>
            </NumberInputGroup>
          </NumberInput>
        </div>
      ))}
    </div>
  )
}

export { UiSdkNumberInputFormat }

Langue

Ouvrir l’exemple

locale choisit les séparateurs, symboles et groupements de chiffres, pour l’affichage comme pour la saisie. Sans elle, le champ suit la langue de la page une fois interactif, et le serveur rend l’anglais.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

const fields = [
  {
    id: "preis",
    label: "Preis",
    locale: "de-DE",
    defaultValue: 1234.5,
    step: 0.01,
    format: { style: "currency", currency: "EUR" },
  },
  {
    id: "budget",
    label: "Budget",
    locale: "en-IN",
    defaultValue: 1234567,
    step: 1000,
    format: { style: "currency", currency: "INR", maximumFractionDigits: 0 },
  },
  {
    id: "kakaku",
    label: "価格",
    locale: "ja-JP",
    defaultValue: 2980,
    step: 10,
    format: { style: "currency", currency: "JPY" },
  },
] satisfies {
  id: string
  label: string
  locale: string
  defaultValue: number
  step: number
  format: Intl.NumberFormatOptions
}[]

function UiSdkNumberInputLocale() {
  return (
    <div className="flex w-full max-w-52 flex-col gap-4">
      {fields.map(({ id, label, ...options }) => (
        <div key={id} className="flex flex-col gap-2">
          <Label htmlFor={id}>{label}</Label>
          <NumberInput {...options} min={0}>
            <NumberInputGroup>
              <NumberInputDecrement />
              <NumberInputControl id={id} />
              <NumberInputIncrement />
            </NumberInputGroup>
          </NumberInput>
        </div>
      ))}
    </div>
  )
}

export { UiSdkNumberInputLocale }

Glisser

Ouvrir l’exemple

Faites glisser un NumberInputScrubArea latéralement pour changer la valeur, comme dans un outil de design. Là où le navigateur autorise le verrouillage du pointeur, le glissement peut dépasser le bord de l’écran, et NumberInputScrubAreaCursor dessine le curseur.

import {
  NumberInput,
  NumberInputControl,
  NumberInputGroup,
  NumberInputScrubArea,
  NumberInputScrubAreaCursor,
} from "@/components/ui/ui-sdk-number-input"

const fields = [
  { label: "X position", handle: "X", defaultValue: 120 },
  { label: "Y position", handle: "Y", defaultValue: 48 },
  { label: "Width", handle: "W", defaultValue: 320, min: 0 },
  { label: "Height", handle: "H", defaultValue: 240, min: 0 },
]

function UiSdkNumberInputScrub() {
  return (
    <div
      role="group"
      aria-labelledby="scrub-frame"
      className="flex w-full max-w-64 flex-col gap-2"
    >
      <p id="scrub-frame" className="m-0 text-xs font-medium">
        Frame
      </p>
      <div className="grid grid-cols-2 gap-2">
        {fields.map(({ label, handle, ...options }) => (
          <NumberInput key={label} {...options}>
            <NumberInputGroup variant="plain">
              <NumberInputScrubArea pixelsPerStep={1}>
                <span aria-hidden="true">{handle}</span>
                <NumberInputScrubAreaCursor />
              </NumberInputScrubArea>
              <NumberInputControl aria-label={label} />
            </NumberInputGroup>
          </NumberInput>
        ))}
      </div>
    </div>
  )
}

export { UiSdkNumberInputScrub }

Molette

Ouvrir l’exemple

Avec wheel, faire défiler au-dessus du champ ciblé modifie la valeur. C’est désactivé par défaut, donc une page qui défile par-dessus ne le change jamais.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputWheel() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="hover-delay">Hover delay</Label>
      <NumberInput
        defaultValue={300}
        min={0}
        max={2000}
        step={50}
        wheel
        format={{ style: "unit", unit: "millisecond" }}
        locale="en-US"
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="hover-delay" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">
        Focus it, then scroll over it.
      </p>
    </div>
  )
}

export { UiSdkNumberInputWheel }

Contrôlé

Ouvrir l’exemple

onValueChange s’exécute à chaque changement valide, et onValueCommit à la fin d’une interaction, c’est lui qui sert à enregistrer. Un contrôleur modifie ou fixe la valeur depuis n’importe quel bouton.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
  createNumberInputController,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputControlled() {
  const [seats, setSeats] = React.useState<number | null>(5)
  const [saved, setSaved] = React.useState<number | null>(5)
  const [controller] = React.useState(createNumberInputController)

  return (
    <div className="flex w-full max-w-56 flex-col gap-2">
      <Label htmlFor="seats">Seats</Label>
      <NumberInput
        controller={controller}
        value={seats}
        min={1}
        max={50}
        onValueChange={(value) => setSeats(value)}
        onValueCommit={(value) => setSaved(value)}
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="seats" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <div className="flex items-center gap-2 pt-1">
        <Button
          size="sm"
          variant="outline"
          onClick={() => controller.increment({ large: true })}
        >
          Add 10
        </Button>
        <Button
          size="sm"
          variant="ghost"
          onClick={() => controller.setValue(1)}
        >
          Reset to 1
        </Button>
      </div>
      <p className="m-0 text-xs text-muted-foreground tabular-nums">
        {`Showing ${seats ?? "nothing"}, saved ${saved ?? "nothing"}.`}
      </p>
    </div>
  )
}

export { UiSdkNumberInputControlled }

Form

Ouvrir l’exemple

Avec un name, le nombre est envoyé tel quel, comme 1250, jamais formaté. required bloque un champ vide, et la réinitialisation du formulaire revient à la valeur par défaut.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputForm() {
  const [submitted, setSubmitted] = React.useState<string | null>(null)

  return (
    <form
      className="flex w-full max-w-48 flex-col gap-2"
      onSubmit={(event) => {
        event.preventDefault()
        setSubmitted(String(new FormData(event.currentTarget).get("amount")))
      }}
      onReset={() => setSubmitted(null)}
    >
      <Label htmlFor="amount">Amount</Label>
      <NumberInput
        name="amount"
        required
        min={1}
        step={0.01}
        defaultValue={1250}
        locale="en-US"
        format={{ style: "currency", currency: "USD" }}
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="amount" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <div className="flex items-center gap-3 pt-1">
        <Button type="submit" size="sm">
          Submit
        </Button>
        <Button type="reset" size="sm" variant="ghost">
          Reset
        </Button>
      </div>
      <p className="m-0 text-xs text-muted-foreground tabular-nums">
        {submitted === null
          ? "Nothing submitted yet."
          : `Submitted amount=${submitted}`}
      </p>
    </form>
  )
}

export { UiSdkNumberInputForm }

Invalide

Ouvrir l’exemple

invalid marque le champ et pose aria-invalid sur l’entrée, pour vos propres vérifications comme le stock.

"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

const stock = 12

function UiSdkNumberInputInvalid() {
  const [quantity, setQuantity] = React.useState<number | null>(14)
  const invalid = quantity !== null && quantity > stock

  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="order-quantity">Quantity</Label>
      <NumberInput
        defaultValue={14}
        min={1}
        invalid={invalid}
        onValueChange={(value) => setQuantity(value)}
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl
            id="order-quantity"
            aria-describedby="order-quantity-message"
          />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p
        id="order-quantity-message"
        className={
          invalid
            ? "m-0 text-xs text-destructive"
            : "m-0 text-xs text-muted-foreground"
        }
      >
        {invalid ? `Only ${stock} left in stock.` : `${stock} in stock.`}
      </p>
    </div>
  )
}

export { UiSdkNumberInputInvalid }

Désactivé

Ouvrir l’exemple

Un champ désactivé ne peut être ni ciblé ni modifié, et n’est pas envoyé.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputDisabled() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="sold-out">Quantity</Label>
      <NumberInput defaultValue={3} disabled>
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="sold-out" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">Sold out.</p>
    </div>
  )
}

export { UiSdkNumberInputDisabled }

Lecture seule

Ouvrir l’exemple

Un champ en lecture seule peut être ciblé et est envoyé, mais les boutons, le glissement et la saisie ne le modifient pas.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputReadOnly() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="included-seats">Seats included</Label>
      <NumberInput defaultValue={5} readOnly>
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="included-seats" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">Set by your plan.</p>
    </div>
  )
}

export { UiSdkNumberInputReadOnly }

De droite à gauche

Ouvrir l’exemple

Les boutons changent de côté, et la langue fixe les chiffres et la devise.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-44 flex-col gap-2">
      <Label htmlFor="rtl-amount">المبلغ</Label>
      <NumberInput
        defaultValue={250}
        min={0}
        step={5}
        locale="ar-EG"
        format={{ style: "currency", currency: "EGP" }}
      >
        <NumberInputGroup>
          <NumberInputDecrement aria-label="إنقاص" />
          <NumberInputControl id="rtl-amount" />
          <NumberInputIncrement aria-label="زيادة" />
        </NumberInputGroup>
      </NumberInput>
    </div>
  )
}

export { UiSdkNumberInputRtl }

Clavier

Touche	Action
`↑↓`	Modifie la valeur de step.
`ShiftPageUpPageDown`	Modifie de largeStep, dix pas par défaut. Maj fonctionne avec les flèches, les boutons, la molette et le glissement.
`Alt`	Avec une flèche, modifie de smallStep, un dixième de pas par défaut.
`HomeEnd`	Va au minimum ou au maximum, s’ils sont définis.
`Enter`	Valide et formate la saisie.

Accessibilité

Le champ suit le clavier du motif spinbutton de WAI-ARIA sur un champ texte natif, donc l’édition de texte habituelle fonctionne toujours. Nommez le champ avec un libellé ou aria-label. Les boutons s’appellent « Increase » et « Decrease » par défaut, pointent vers le champ et restent hors de l’ordre de tabulation, car les flèches font la même chose.

Un champ avec décimales demande un pavé décimal sur mobile, et les boutons grandissent sur écran tactile. Ils ne rétrécissent à l’appui que si les animations sont autorisées.

Référence de l’API

Chaque partie enveloppe la partie UI SDK du même nom et accepte toutes ses props, y compris render et un className qui peut être une fonction de son état.

NumberInput

Prop	Type	Par défaut
`value`	`number \| null`	`–`
`defaultValue`	`number \| null`	`–`
`onValueChange`	`(value: number \| null, details) => void`	`–`
`onValueCommit`S’exécute à la fin d’une interaction. Pour enregistrer.	`(value: number \| null, details) => void`	`–`
`min`	`number`	`–`
`max`	`number`	`–`
`step`	`number`	`1`
`largeStep`	`number`	`step × 10`
`smallStep`	`number`	`step ÷ 10`
`format`	`Intl.NumberFormatOptions`	`–`
`locale`Par défaut, la langue de la page.	`string`	`–`
`wheel`	`boolean`	`false`
`invalid`	`boolean`	`false`
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`required`	`boolean`	`false`
`name`	`string`	`–`
`form`	`string`	`–`
`controller`Issu de createNumberInputController().	`NumberInputController`	`–`

Attribut	Description
`data-slot="number-input"`	Pour cibler le champ numérique en CSS.
`data-scrubbing`	Présent pendant qu’un glissement modifie la valeur.
`data-invalid`	Présent quand il est invalide.
`data-disabled`	Présent lorsque l’élément est désactivé.
`data-readonly`	Présent en lecture seule.
`data-required`	Présent lorsqu’elle est requise.

NumberInputGroup

Prop	Type	Par défaut
`variant`Des boutons des deux côtés, des chevrons empilés à la fin, ou aucun bouton, pour une poignée de glissement.	`"split" \| "stacked" \| "plain"`	`"split"`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

Attribut	Description
`data-slot="number-input-group"`	Pour cibler le cadre du champ en CSS.
`data-variant`	La variante : split, stacked ou plain.

NumberInputControl

Prop	Type	Par défaut
`id`	`string`	`–`
`placeholder`	`string`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

NumberInputIncrement

Prop	Type	Par défaut
`aria-label`	`string`	`"Increase"`
`disabled`Désactive ce bouton seul.	`boolean`	`–`
`children`Par défaut un plus, ou un chevron dans la variante stacked.	`ReactNode \| (state) => ReactNode`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

Attribut	Description
`data-slot="number-input-increment"`	Cible le bouton en CSS.
`data-at-bound`	Présent quand la valeur est à max.
`data-disabled`	Présent quand le bouton ne peut pas modifier la valeur.

NumberInputDecrement

Prop	Type	Par défaut
`aria-label`	`string`	`"Decrease"`
`disabled`Désactive ce bouton seul.	`boolean`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

Attribut	Description
`data-slot="number-input-decrement"`	Cible le bouton en CSS.
`data-at-bound`	Présent quand la valeur est à min.

NumberInputStepper

Empile le bouton d’augmentation au-dessus de celui de diminution à la fin d’un groupe stacked.

NumberInputScrubArea

Prop	Type	Par défaut
`orientation`La droite et le haut augmentent la valeur.	`"horizontal" \| "vertical"`	`"horizontal"`
`pixelsPerStep`La distance parcourue par le pointeur pour un pas.	`number`	`–`
`controller`Relie une zone de glissement placée hors du champ numérique, comme une icône dans une barre d’outils.	`NumberInputController`	`–`

Attribut	Description
`data-slot="number-input-scrub-area"`	Pour cibler la zone de glissement en CSS.
`data-orientation`	horizontal ou vertical.
`data-scrubbing`	Présent pendant qu’un glissement modifie la valeur.

NumberInputScrubAreaCursor

Prop	Type	Par défaut
`children`Par défaut, une flèche horizontale centrée sur le pointeur.	`ReactNode`	`–`