## Import

```jsx
import { Slider } from "@cfa/react-core";
```

## Live Editor

```jsx
<Slider.Root>
  <Slider.Label>Label</Slider.Label>
  <Slider.Output />
  <Slider.Track>
    <Slider.Thumb />
  </Slider.Track>
</Slider.Root>
```

## Examples

### Color

The Slider has two `color` options: `"primary"` by default and `"secondary"`.

```jsx
<>
  <Slider.Root color="secondary" defaultValue={3}>
    <Slider.Label>Label</Slider.Label>
    <Slider.Output />
    <Slider.Track>
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Root>
</>
```

### Controlled

To create a controlled Slider, pass the `value` and `onChange` props to the `Slider.Root`.

```jsx
function ExampleControlledSlider() {
  const [value, setValue] = React.useState(3);
  return (
    <>
      <Slider.Root value={value} onChange={setValue}>
        <Slider.Label>Label</Slider.Label>
        <Slider.Track>
          <Slider.Thumb />
        </Slider.Track>
      </Slider.Root>

      <p style={{ marginTop: 16 }}>Controlled value: {value}</p>
    </>
  );
}
```

### Description

Use the `Slider.Description` to add helper text to the Slider.

```jsx
<Slider.Root defaultValue={3}>
  <Slider.Label>Label</Slider.Label>
  <Slider.Output />
  <Slider.Track>
    <Slider.Thumb />
  </Slider.Track>
  <Slider.Description>Helper text</Slider.Description>
</Slider.Root>
```

### Disabled

Pass the `isDisabled` prop to the `Slider.Root` to disable the SLider.

```jsx
<Slider.Root isDisabled defaultValue={3}>
  <Slider.Label>Label</Slider.Label>
  <Slider.Output />
  <Slider.Track>
    <Slider.Thumb />
  </Slider.Track>
</Slider.Root>
```

### Output

By default the self-closing `Slider.Output` component will either display the single value if a normal slider, or a ranged value if using a range slider.

```jsx
<>
  <Slider.Root defaultValue={4}>
    <Slider.Label>Single Value Slider</Slider.Label>
    <Slider.Output />
    <Slider.Track>
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Root>
  <br />
  <Slider.Root defaultValue={[1, 4]}>
    <Slider.Label>Range Slider</Slider.Label>
    <Slider.Output />
    <Slider.Track>
      <Slider.Thumb index={0} />
      <Slider.Thumb index={1} />
    </Slider.Track>
  </Slider.Root>
</>
```

### Custom Output

To use a custom output, pass the `Slider.Output` children. The Slider internally tracks state for `values` and `getThumbValueLabel`.

```jsx
<Slider.Root defaultValue={4}>
  <Slider.Label>Label</Slider.Label>
  <Slider.Output>
    {({ state }) => (
      <span>Custom output label: {state.getThumbValueLabel(0)}</span>
    )}
  </Slider.Output>
  <Slider.Track>
    <Slider.Thumb />
  </Slider.Track>
</Slider.Root>
```

### Marks

To display incremental marks in the Slider, use the `Slider.Marks` sub-component.

We suggest to **not** use the `Slider.Output` component when using `marks`, since the `marks` will indicate the selected value.

```jsx
<Slider.Root defaultValue={10} maxValue={30} step={5}>
  <Slider.Label>Label</Slider.Label>
  <Slider.Track>
    <Slider.Thumb />
    <Slider.MarkLabels />
  </Slider.Track>
</Slider.Root>
```

### Custom Marks & Output

To display custom labels, use the `Slider.MarkLabels` component and use the `formatter` prop.

```jsx
function ExampleCustomMarks() {
  return (
    <Slider.Root minValue={2} maxValue={20} step={2} defaultValues={[2]}>
      <Slider.Label>Pickle Count</Slider.Label>
      <Slider.Output>
        {({ state }) => `${state.getThumbValue(0)} Pickles`}
      </Slider.Output>
      <Slider.Track hasMarks marksInterval={1}>
        <Slider.Thumb />
      </Slider.Track>
      <Slider.MarkLabels
        labelsInterval={2}
        formatter={(value) => `${value} Pickles`}
      />
    </Slider.Root>
  );
}
```

### Range

To create a range Slider, pass an array to the `defaultValue` or `value` prop and use two `Slider.Thumb` components, passing the array's position to the `index` props of the respective thumbs.

The first thumb should have `index={0}` and the second thumb should have `index={1}`.

Limit the number of `Slider.Thumb`s to **two**.

```jsx
<Slider.Root defaultValue={[10, 20]} minValue={0} maxValue={50} step={1}>
  <Slider.Label>Range</Slider.Label>
  <Slider.Output />
  <Slider.Track>
    <Slider.Thumb index={0} />
    <Slider.Thumb index={1} />
  </Slider.Track>
</Slider.Root>
```

## Props

### Slider.Root

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| color | `"primary" \ | "secondary"` | `primary` | Slider track fill color |
| hasMarks | `boolean` | - | Adds the marks to the Track and the MarkLabels |
| marksInterval | `number` | `1` | Sets the interval of the marks that display on the track, as well as the mark labels |
| ref | `Ref<HTMLDivElement>` | - | Requires React 19 |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| children | `ChildrenOrFunction<SliderRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<SliderRenderProps>` | `'react-aria-Slider'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| defaultValue | `number \ | number[]` | - | The default value (uncontrolled). |
| dir | `string` | - | - |
| formatOptions | `NumberFormatOptions` | - | The display format of the value label. |
| hidden | `boolean` | - | - |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| isDisabled | `boolean` | - | Whether the whole Slider is disabled. |
| lang | `string` | - | - |
| maxValue | `number` | `10` | The slider's maximum value. |
| minValue | `number` | `0` | The slider's minimum value. |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onChange | `(value: number \ | number[]) => void` | - | Handler that is called when the value changes. |
| onChangeEnd | `(value: number \ | number[]) => void` | - | Fired when the slider stops moving, due to being let go. |
| onClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| render | `DOMRenderFunction<"div", SliderRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| slot | `string` | - | A slot name for the component. Slots allow the component to receive props from a parent component.&#xA;An explicit \`null\` value indicates that the local props completely override all props received from a parent. |
| step | `number` | `1` | The slider's step value. |
| style | `StyleOrFunction<SliderRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |
| value | `number \ | number[]` | - | The current value (controlled). |

### Slider.Label

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| isDisabled | `boolean` | - | Whether the Label is on a disabled input or element. |
| isRequired | `boolean` | - | Whether the Label is on a required input or element. |
| about | `string` | - | - |
| accessKey | `string` | - | - |
| aria-activedescendant | `string` | - | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| aria-atomic | `Booleanish` | - | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
| aria-autocomplete | `"none" \ | "list" \ | "inline" \ | "both"` | - | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be&#xA;presented if they are made. |
| aria-braillelabel | `string` | - | Defines a string value that labels the current element, which is intended to be converted into Braille.&#xA;@see aria-label. |
| aria-brailleroledescription | `string` | - | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.&#xA;@see aria-roledescription. |
| aria-busy | `Booleanish` | - | - |
| aria-checked | `boolean \ | "true" \ | "false" \ | "mixed"` | - | Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.&#xA;@see aria-pressed&#xA;@see aria-selected. |
| aria-colcount | `number` | - | Defines the total number of columns in a table, grid, or treegrid.&#xA;@see aria-colindex. |
| aria-colindex | `number` | - | Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.&#xA;@see aria-colcount&#xA;@see aria-colspan. |
| aria-colindextext | `string` | - | Defines a human readable text alternative of aria-colindex.&#xA;@see aria-rowindextext. |
| aria-colspan | `number` | - | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.&#xA;@see aria-colindex&#xA;@see aria-rowspan. |
| aria-controls | `string` | - | Identifies the element (or elements) whose contents or presence are controlled by the current element.&#xA;@see aria-owns. |
| aria-current | `boolean \ | "step" \ | "true" \ | "false" \ | "page" \ | "location" \ | "date" \ | "time"` | - | Indicates the element that represents the current item within a container or set of related elements. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object.&#xA;@see aria-labelledby |
| aria-description | `string` | - | Defines a string value that describes or annotates the current element.&#xA;@see related aria-describedby. |
| aria-details | `string` | - | Identifies the element that provides a detailed, extended description for the object.&#xA;@see aria-describedby. |
| aria-disabled | `Booleanish` | - | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.&#xA;@see aria-hidden&#xA;@see aria-readonly. |
| aria-dropeffect | `"none" \ | "link" \ | "copy" \ | "execute" \ | "move" \ | "popup"` | - | Indicates what functions can be performed when a dragged object is released on the drop target.&#xA;@deprecated in ARIA 1.1 |
| aria-errormessage | `string` | - | Identifies the element that provides an error message for the object.&#xA;@see aria-invalid&#xA;@see aria-describedby. |
| aria-expanded | `Booleanish` | - | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| aria-flowto | `string` | - | Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,&#xA;allows assistive technology to override the general default of reading in document source order. |
| aria-grabbed | `Booleanish` | - | Indicates an element's "grabbed" state in a drag-and-drop operation.&#xA;@deprecated in ARIA 1.1 |
| aria-haspopup | `boolean \ | "true" \ | "false" \ | "dialog" \ | "grid" \ | "listbox" \ | "menu" \ | "tree"` | - | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-hidden | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API.&#xA;@see aria-disabled. |
| aria-invalid | `boolean \ | "true" \ | "false" \ | "grammar" \ | "spelling"` | - | Indicates the entered value does not conform to the format expected by the application.&#xA;@see aria-errormessage. |
| aria-keyshortcuts | `string` | - | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
| aria-label | `string` | - | Defines a string value that labels the current element.&#xA;@see aria-labelledby. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element.&#xA;@see aria-describedby. |
| aria-level | `number` | - | Defines the hierarchical level of an element within a structure. |
| aria-live | `"off" \ | "assertive" \ | "polite"` | - | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
| aria-modal | `Booleanish` | - | Indicates whether an element is modal when displayed. |
| aria-multiline | `Booleanish` | - | Indicates whether a text box accepts multiple lines of input or only a single line. |
| aria-multiselectable | `Booleanish` | - | Indicates that the user may select more than one item from the current selectable descendants. |
| aria-orientation | `"horizontal" \ | "vertical"` | - | Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |
| aria-owns | `string` | - | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship&#xA;between DOM elements where the DOM hierarchy cannot be used to represent the relationship.&#xA;@see aria-controls. |
| aria-placeholder | `string` | - | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.&#xA;A hint could be a sample value or a brief description of the expected format. |
| aria-posinset | `number` | - | Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.&#xA;@see aria-setsize. |
| aria-pressed | `boolean \ | "true" \ | "false" \ | "mixed"` | - | Indicates the current "pressed" state of toggle buttons.&#xA;@see aria-checked&#xA;@see aria-selected. |
| aria-readonly | `Booleanish` | - | Indicates that the element is not editable, but is otherwise operable.&#xA;@see aria-disabled. |
| aria-relevant | `"text" \ | "additions" \ | "additions removals" \ | "additions text" \ | "all" \ | "removals" \ | "removals additions" \ | "removals text" \ | "text additions" \ | "text removals"` | - | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.&#xA;@see aria-atomic. |
| aria-required | `Booleanish` | - | Indicates that user input is required on the element before a form may be submitted. |
| aria-roledescription | `string` | - | Defines a human-readable, author-localized description for the role of an element. |
| aria-rowcount | `number` | - | Defines the total number of rows in a table, grid, or treegrid.&#xA;@see aria-rowindex. |
| aria-rowindex | `number` | - | Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.&#xA;@see aria-rowcount&#xA;@see aria-rowspan. |
| aria-rowindextext | `string` | - | Defines a human readable text alternative of aria-rowindex.&#xA;@see aria-colindextext. |
| aria-rowspan | `number` | - | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.&#xA;@see aria-rowindex&#xA;@see aria-colspan. |
| aria-selected | `Booleanish` | - | Indicates the current "selected" state of various widgets.&#xA;@see aria-checked&#xA;@see aria-pressed. |
| aria-setsize | `number` | - | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.&#xA;@see aria-posinset. |
| aria-sort | `"none" \ | "ascending" \ | "descending" \ | "other"` | - | Indicates if items in a table or grid are sorted in ascending or descending order. |
| aria-valuemax | `number` | - | Defines the maximum allowed value for a range widget. |
| aria-valuemin | `number` | - | Defines the minimum allowed value for a range widget. |
| aria-valuenow | `number` | - | Defines the current value for a range widget.&#xA;@see aria-valuetext. |
| aria-valuetext | `string` | - | Defines the human readable text alternative of aria-valuenow for a range widget. |
| autoCapitalize | `"off" \ | "none" \ | "on" \ | "sentences" \ | "words" \ | "characters" \ | (string & {})` | - | - |
| autoCorrect | `string` | - | - |
| autoFocus | `boolean` | - | - |
| autoSave | `string` | - | - |
| className | `string` | - | - |
| color | `string` | - | - |
| content | `string` | - | - |
| contentEditable | `Booleanish \ | "inherit" \ | "plaintext-only"` | - | - |
| contextMenu | `string` | - | - |
| dangerouslySetInnerHTML | `{ __html: string \ | TrustedHTML; }` | - | - |
| datatype | `string` | - | - |
| defaultChecked | `boolean` | - | - |
| defaultValue | `string \ | number \ | readonly string[]` | - | - |
| dir | `string` | - | - |
| draggable | `Booleanish` | - | - |
| elementType | `string` | - | - |
| enterKeyHint | `"enter" \ | "done" \ | "go" \ | "next" \ | "previous" \ | "search" \ | "send"` | - | - |
| exportparts | `string` | - | @see \{@link https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/exportparts} |
| form | `string` | - | - |
| hidden | `boolean` | - | - |
| htmlFor | `string` | - | - |
| id | `string` | - | - |
| inert | `boolean` | - | @see https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert |
| inlist | `any` | - | - |
| inputMode | `"none" \ | "search" \ | "text" \ | "tel" \ | "url" \ | "email" \ | "numeric" \ | "decimal"` | - | Hints at the type of data that might be entered by the user while editing the element or its contents&#xA;@see \{@link https\://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} |
| is | `string` | - | Specify that a standard HTML element should behave like a defined custom built-in element&#xA;@see \{@link https\://html.spec.whatwg.org/multipage/custom-elements.html#attr-is} |
| itemID | `string` | - | - |
| itemProp | `string` | - | - |
| itemRef | `string` | - | - |
| itemScope | `boolean` | - | - |
| itemType | `string` | - | - |
| lang | `string` | - | - |
| nonce | `string` | - | - |
| onAbort | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onAbortCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLLabelElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLLabelElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLLabelElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLLabelElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLLabelElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLLabelElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onBeforeInput | `InputEventHandler<HTMLLabelElement>` | - | - |
| onBeforeInputCapture | `FormEventHandler<HTMLLabelElement>` | - | - |
| onBeforeToggle | `ToggleEventHandler<HTMLLabelElement>` | - | - |
| onBlur | `FocusEventHandler<HTMLLabelElement>` | - | - |
| onBlurCapture | `FocusEventHandler<HTMLLabelElement>` | - | - |
| onCanPlay | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onCanPlayCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onCanPlayThrough | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onCanPlayThroughCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onChange | `FormEventHandler<HTMLLabelElement>` | - | - |
| onChangeCapture | `FormEventHandler<HTMLLabelElement>` | - | - |
| onClick | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onCompositionEnd | `CompositionEventHandler<HTMLLabelElement>` | - | - |
| onCompositionEndCapture | `CompositionEventHandler<HTMLLabelElement>` | - | - |
| onCompositionStart | `CompositionEventHandler<HTMLLabelElement>` | - | - |
| onCompositionStartCapture | `CompositionEventHandler<HTMLLabelElement>` | - | - |
| onCompositionUpdate | `CompositionEventHandler<HTMLLabelElement>` | - | - |
| onCompositionUpdateCapture | `CompositionEventHandler<HTMLLabelElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onCopy | `ClipboardEventHandler<HTMLLabelElement>` | - | - |
| onCopyCapture | `ClipboardEventHandler<HTMLLabelElement>` | - | - |
| onCut | `ClipboardEventHandler<HTMLLabelElement>` | - | - |
| onCutCapture | `ClipboardEventHandler<HTMLLabelElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onDrag | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragCapture | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragEnd | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragEndCapture | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragEnter | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragEnterCapture | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragExit | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragExitCapture | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragLeave | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragLeaveCapture | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragOver | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragOverCapture | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragStart | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDragStartCapture | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDrop | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDropCapture | `DragEventHandler<HTMLLabelElement>` | - | - |
| onDurationChange | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onDurationChangeCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onEmptied | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onEmptiedCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onEncrypted | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onEncryptedCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onEnded | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onEndedCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onError | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onErrorCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onFocus | `FocusEventHandler<HTMLLabelElement>` | - | - |
| onFocusCapture | `FocusEventHandler<HTMLLabelElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onInput | `FormEventHandler<HTMLLabelElement>` | - | - |
| onInputCapture | `FormEventHandler<HTMLLabelElement>` | - | - |
| onInvalid | `FormEventHandler<HTMLLabelElement>` | - | - |
| onInvalidCapture | `FormEventHandler<HTMLLabelElement>` | - | - |
| onKeyDown | `KeyboardEventHandler<HTMLLabelElement>` | - | - |
| onKeyDownCapture | `KeyboardEventHandler<HTMLLabelElement>` | - | - |
| onKeyPress | `KeyboardEventHandler<HTMLLabelElement>` | - | @deprecated Use \`onKeyUp\` or \`onKeyDown\` instead |
| onKeyPressCapture | `KeyboardEventHandler<HTMLLabelElement>` | - | @deprecated Use \`onKeyUpCapture\` or \`onKeyDownCapture\` instead |
| onKeyUp | `KeyboardEventHandler<HTMLLabelElement>` | - | - |
| onKeyUpCapture | `KeyboardEventHandler<HTMLLabelElement>` | - | - |
| onLoad | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onLoadCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onLoadedData | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onLoadedDataCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onLoadedMetadata | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onLoadedMetadataCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onLoadStart | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onLoadStartCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLLabelElement>` | - | - |
| onPaste | `ClipboardEventHandler<HTMLLabelElement>` | - | - |
| onPasteCapture | `ClipboardEventHandler<HTMLLabelElement>` | - | - |
| onPause | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onPauseCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onPlay | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onPlayCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onPlaying | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onPlayingCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLLabelElement>` | - | - |
| onProgress | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onProgressCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onRateChange | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onRateChangeCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onReset | `FormEventHandler<HTMLLabelElement>` | - | - |
| onResetCapture | `FormEventHandler<HTMLLabelElement>` | - | - |
| onScroll | `UIEventHandler<HTMLLabelElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLLabelElement>` | - | - |
| onScrollEnd | `UIEventHandler<HTMLLabelElement>` | - | - |
| onScrollEndCapture | `UIEventHandler<HTMLLabelElement>` | - | - |
| onSeeked | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onSeekedCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onSeeking | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onSeekingCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onSelect | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onSelectCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onStalled | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onStalledCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onSubmit | `FormEventHandler<HTMLLabelElement>` | - | - |
| onSubmitCapture | `FormEventHandler<HTMLLabelElement>` | - | - |
| onSuspend | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onSuspendCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onTimeUpdate | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onTimeUpdateCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onToggle | `ToggleEventHandler<HTMLLabelElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLLabelElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLLabelElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLLabelElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLLabelElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLLabelElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLLabelElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLLabelElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLLabelElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLLabelElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLLabelElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLLabelElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLLabelElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLLabelElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLLabelElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLLabelElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLLabelElement>` | - | - |
| onVolumeChange | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onVolumeChangeCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onWaiting | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onWaitingCapture | `ReactEventHandler<HTMLLabelElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLLabelElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLLabelElement>` | - | - |
| part | `string` | - | @see \{@link https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/part} |
| popover | `"" \ | "auto" \ | "manual" \ | "hint"` | - | - |
| popoverTarget | `string` | - | - |
| popoverTargetAction | `"toggle" \ | "show" \ | "hide"` | - | - |
| prefix | `string` | - | - |
| property | `string` | - | - |
| radioGroup | `string` | - | - |
| rel | `string` | - | - |
| render | `DOMRenderFunction<"label", undefined>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| resource | `string` | - | - |
| results | `number` | - | - |
| rev | `string` | - | - |
| role | `AriaRole` | - | - |
| security | `string` | - | - |
| slot | `string` | - | - |
| spellCheck | `Booleanish` | - | - |
| style | `CSSProperties` | - | - |
| suppressContentEditableWarning | `boolean` | - | - |
| suppressHydrationWarning | `boolean` | - | - |
| tabIndex | `number` | - | - |
| title | `string` | - | - |
| translate | `"yes" \ | "no"` | - | - |
| typeof | `string` | - | - |
| unselectable | `"off" \ | "on"` | - | - |
| vocab | `string` | - | - |

### Slider.Output

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children | `ChildrenOrFunction<SliderRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<SliderRenderProps>` | `'react-aria-SliderOutput'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| inert | `boolean` | - | - |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLOutputElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLOutputElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLOutputElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLOutputElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLOutputElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLOutputElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onClick | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLOutputElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLOutputElement>` | - | - |
| onScroll | `UIEventHandler<HTMLOutputElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLOutputElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLOutputElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLOutputElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLOutputElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLOutputElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLOutputElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLOutputElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLOutputElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLOutputElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLOutputElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLOutputElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLOutputElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLOutputElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLOutputElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLOutputElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLOutputElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLOutputElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLOutputElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLOutputElement>` | - | - |
| render | `DOMRenderFunction<"output", SliderRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| style | `StyleOrFunction<SliderRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |

### Slider.Track

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| hasMarks | `boolean` | - | Adds the marks to the Track and the MarkLabels |
| marksInterval | `number` | `1` | Sets the interval of the marks that display on the track |
| children | `ChildrenOrFunction<SliderTrackRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<SliderTrackRenderProps>` | `'react-aria-SliderTrack'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| inert | `boolean` | - | - |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onHoverChange | `(isHovering: boolean) => void` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction starts. |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| render | `DOMRenderFunction<"div", SliderTrackRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| style | `StyleOrFunction<SliderTrackRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |

### Slider.Thumb

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| ref | `Ref<HTMLDivElement>` | - | Requires React 19 |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-errormessage | `string` | - | Identifies the element that provides an error message for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| autoFocus | `boolean` | - | Whether the element should receive focus on render. |
| children | `ChildrenOrFunction<SliderThumbRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<SliderThumbRenderProps>` | `'react-aria-SliderThumb'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir | `string` | - | - |
| form | `string` | - | The \`\<form>\` element to associate the input with.&#xA;The value of this attribute must be the id of a \`\<form>\` in the same document.&#xA;See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| hidden | `boolean` | - | - |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| index | `number` | `0` | Index of the thumb within the slider. |
| inert | `boolean` | - | - |
| inputRef | `RefObject<HTMLInputElement>` | - | A ref for the HTML input element. |
| isDisabled | `boolean` | - | Whether the Thumb is disabled. |
| isInvalid | `boolean` | - | @deprecated |
| isRequired | `boolean` | - | @deprecated |
| lang | `string` | - | - |
| name | `string` | - | The name of the input element, used when submitting an HTML form. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onBlur | `(e: FocusEvent<Element, Element>) => void` | - | Handler that is called when the element loses focus. |
| onClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onFocus | `(e: FocusEvent<Element, Element>) => void` | - | Handler that is called when the element receives focus. |
| onFocusChange | `(isFocused: boolean) => void` | - | Handler that is called when the element's focus status changes. |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onHoverChange | `(isHovering: boolean) => void` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction starts. |
| onKeyDown | `(e: KeyboardEvent) => void` | - | Handler that is called when a key is pressed. |
| onKeyUp | `(e: KeyboardEvent) => void` | - | Handler that is called when a key is released. |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| orientation | `Orientation` | `'horizontal'` | The orientation of the Slider.&#xA;@deprecated - pass to the slider instead. |
| render | `DOMRenderFunction<"div", SliderThumbRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| style | `StyleOrFunction<SliderThumbRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |

### Slider.Description

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| isInvalid | `boolean` | - | - |
| isSuccess | `boolean` | - | - |
| about | `string` | - | - |
| accessKey | `string` | - | - |
| aria-activedescendant | `string` | - | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| aria-atomic | `Booleanish` | - | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
| aria-autocomplete | `"none" \ | "list" \ | "inline" \ | "both"` | - | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be&#xA;presented if they are made. |
| aria-braillelabel | `string` | - | Defines a string value that labels the current element, which is intended to be converted into Braille.&#xA;@see aria-label. |
| aria-brailleroledescription | `string` | - | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.&#xA;@see aria-roledescription. |
| aria-busy | `Booleanish` | - | - |
| aria-checked | `boolean \ | "true" \ | "false" \ | "mixed"` | - | Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.&#xA;@see aria-pressed&#xA;@see aria-selected. |
| aria-colcount | `number` | - | Defines the total number of columns in a table, grid, or treegrid.&#xA;@see aria-colindex. |
| aria-colindex | `number` | - | Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.&#xA;@see aria-colcount&#xA;@see aria-colspan. |
| aria-colindextext | `string` | - | Defines a human readable text alternative of aria-colindex.&#xA;@see aria-rowindextext. |
| aria-colspan | `number` | - | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.&#xA;@see aria-colindex&#xA;@see aria-rowspan. |
| aria-controls | `string` | - | Identifies the element (or elements) whose contents or presence are controlled by the current element.&#xA;@see aria-owns. |
| aria-current | `boolean \ | "step" \ | "true" \ | "false" \ | "page" \ | "location" \ | "date" \ | "time"` | - | Indicates the element that represents the current item within a container or set of related elements. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object.&#xA;@see aria-labelledby |
| aria-description | `string` | - | Defines a string value that describes or annotates the current element.&#xA;@see related aria-describedby. |
| aria-details | `string` | - | Identifies the element that provides a detailed, extended description for the object.&#xA;@see aria-describedby. |
| aria-disabled | `Booleanish` | - | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.&#xA;@see aria-hidden&#xA;@see aria-readonly. |
| aria-dropeffect | `"none" \ | "link" \ | "copy" \ | "execute" \ | "move" \ | "popup"` | - | Indicates what functions can be performed when a dragged object is released on the drop target.&#xA;@deprecated in ARIA 1.1 |
| aria-errormessage | `string` | - | Identifies the element that provides an error message for the object.&#xA;@see aria-invalid&#xA;@see aria-describedby. |
| aria-expanded | `Booleanish` | - | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| aria-flowto | `string` | - | Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,&#xA;allows assistive technology to override the general default of reading in document source order. |
| aria-grabbed | `Booleanish` | - | Indicates an element's "grabbed" state in a drag-and-drop operation.&#xA;@deprecated in ARIA 1.1 |
| aria-haspopup | `boolean \ | "true" \ | "false" \ | "dialog" \ | "grid" \ | "listbox" \ | "menu" \ | "tree"` | - | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-hidden | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API.&#xA;@see aria-disabled. |
| aria-invalid | `boolean \ | "true" \ | "false" \ | "grammar" \ | "spelling"` | - | Indicates the entered value does not conform to the format expected by the application.&#xA;@see aria-errormessage. |
| aria-keyshortcuts | `string` | - | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
| aria-label | `string` | - | Defines a string value that labels the current element.&#xA;@see aria-labelledby. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element.&#xA;@see aria-describedby. |
| aria-level | `number` | - | Defines the hierarchical level of an element within a structure. |
| aria-live | `"off" \ | "assertive" \ | "polite"` | - | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
| aria-modal | `Booleanish` | - | Indicates whether an element is modal when displayed. |
| aria-multiline | `Booleanish` | - | Indicates whether a text box accepts multiple lines of input or only a single line. |
| aria-multiselectable | `Booleanish` | - | Indicates that the user may select more than one item from the current selectable descendants. |
| aria-orientation | `"horizontal" \ | "vertical"` | - | Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |
| aria-owns | `string` | - | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship&#xA;between DOM elements where the DOM hierarchy cannot be used to represent the relationship.&#xA;@see aria-controls. |
| aria-placeholder | `string` | - | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.&#xA;A hint could be a sample value or a brief description of the expected format. |
| aria-posinset | `number` | - | Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.&#xA;@see aria-setsize. |
| aria-pressed | `boolean \ | "true" \ | "false" \ | "mixed"` | - | Indicates the current "pressed" state of toggle buttons.&#xA;@see aria-checked&#xA;@see aria-selected. |
| aria-readonly | `Booleanish` | - | Indicates that the element is not editable, but is otherwise operable.&#xA;@see aria-disabled. |
| aria-relevant | `"text" \ | "additions" \ | "additions removals" \ | "additions text" \ | "all" \ | "removals" \ | "removals additions" \ | "removals text" \ | "text additions" \ | "text removals"` | - | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.&#xA;@see aria-atomic. |
| aria-required | `Booleanish` | - | Indicates that user input is required on the element before a form may be submitted. |
| aria-roledescription | `string` | - | Defines a human-readable, author-localized description for the role of an element. |
| aria-rowcount | `number` | - | Defines the total number of rows in a table, grid, or treegrid.&#xA;@see aria-rowindex. |
| aria-rowindex | `number` | - | Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.&#xA;@see aria-rowcount&#xA;@see aria-rowspan. |
| aria-rowindextext | `string` | - | Defines a human readable text alternative of aria-rowindex.&#xA;@see aria-colindextext. |
| aria-rowspan | `number` | - | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.&#xA;@see aria-rowindex&#xA;@see aria-colspan. |
| aria-selected | `Booleanish` | - | Indicates the current "selected" state of various widgets.&#xA;@see aria-checked&#xA;@see aria-pressed. |
| aria-setsize | `number` | - | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.&#xA;@see aria-posinset. |
| aria-sort | `"none" \ | "ascending" \ | "descending" \ | "other"` | - | Indicates if items in a table or grid are sorted in ascending or descending order. |
| aria-valuemax | `number` | - | Defines the maximum allowed value for a range widget. |
| aria-valuemin | `number` | - | Defines the minimum allowed value for a range widget. |
| aria-valuenow | `number` | - | Defines the current value for a range widget.&#xA;@see aria-valuetext. |
| aria-valuetext | `string` | - | Defines the human readable text alternative of aria-valuenow for a range widget. |
| autoCapitalize | `"off" \ | "none" \ | "on" \ | "sentences" \ | "words" \ | "characters" \ | (string & {})` | - | - |
| autoCorrect | `string` | - | - |
| autoFocus | `boolean` | - | - |
| autoSave | `string` | - | - |
| className | `string` | - | - |
| color | `string` | - | - |
| content | `string` | - | - |
| contentEditable | `Booleanish \ | "inherit" \ | "plaintext-only"` | - | - |
| contextMenu | `string` | - | - |
| dangerouslySetInnerHTML | `{ __html: string \ | TrustedHTML; }` | - | - |
| datatype | `string` | - | - |
| defaultChecked | `boolean` | - | - |
| defaultValue | `string \ | number \ | readonly string[]` | - | - |
| dir | `string` | - | - |
| draggable | `Booleanish` | - | - |
| elementType | `string` | - | - |
| enterKeyHint | `"enter" \ | "done" \ | "go" \ | "next" \ | "previous" \ | "search" \ | "send"` | - | - |
| exportparts | `string` | - | @see \{@link https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/exportparts} |
| hidden | `boolean` | - | - |
| id | `string` | - | - |
| inert | `boolean` | - | @see https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert |
| inlist | `any` | - | - |
| inputMode | `"none" \ | "search" \ | "text" \ | "tel" \ | "url" \ | "email" \ | "numeric" \ | "decimal"` | - | Hints at the type of data that might be entered by the user while editing the element or its contents&#xA;@see \{@link https\://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} |
| is | `string` | - | Specify that a standard HTML element should behave like a defined custom built-in element&#xA;@see \{@link https\://html.spec.whatwg.org/multipage/custom-elements.html#attr-is} |
| itemID | `string` | - | - |
| itemProp | `string` | - | - |
| itemRef | `string` | - | - |
| itemScope | `boolean` | - | - |
| itemType | `string` | - | - |
| lang | `string` | - | - |
| nonce | `string` | - | - |
| onAbort | `ReactEventHandler<HTMLElement>` | - | - |
| onAbortCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onBeforeInput | `InputEventHandler<HTMLElement>` | - | - |
| onBeforeInputCapture | `FormEventHandler<HTMLElement>` | - | - |
| onBeforeToggle | `ToggleEventHandler<HTMLElement>` | - | - |
| onBlur | `FocusEventHandler<HTMLElement>` | - | - |
| onBlurCapture | `FocusEventHandler<HTMLElement>` | - | - |
| onCanPlay | `ReactEventHandler<HTMLElement>` | - | - |
| onCanPlayCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onCanPlayThrough | `ReactEventHandler<HTMLElement>` | - | - |
| onCanPlayThroughCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onChange | `FormEventHandler<HTMLElement>` | - | - |
| onChangeCapture | `FormEventHandler<HTMLElement>` | - | - |
| onClick | `MouseEventHandler<HTMLElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onCompositionEnd | `CompositionEventHandler<HTMLElement>` | - | - |
| onCompositionEndCapture | `CompositionEventHandler<HTMLElement>` | - | - |
| onCompositionStart | `CompositionEventHandler<HTMLElement>` | - | - |
| onCompositionStartCapture | `CompositionEventHandler<HTMLElement>` | - | - |
| onCompositionUpdate | `CompositionEventHandler<HTMLElement>` | - | - |
| onCompositionUpdateCapture | `CompositionEventHandler<HTMLElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onCopy | `ClipboardEventHandler<HTMLElement>` | - | - |
| onCopyCapture | `ClipboardEventHandler<HTMLElement>` | - | - |
| onCut | `ClipboardEventHandler<HTMLElement>` | - | - |
| onCutCapture | `ClipboardEventHandler<HTMLElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onDrag | `DragEventHandler<HTMLElement>` | - | - |
| onDragCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragEnd | `DragEventHandler<HTMLElement>` | - | - |
| onDragEndCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragEnter | `DragEventHandler<HTMLElement>` | - | - |
| onDragEnterCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragExit | `DragEventHandler<HTMLElement>` | - | - |
| onDragExitCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragLeave | `DragEventHandler<HTMLElement>` | - | - |
| onDragLeaveCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragOver | `DragEventHandler<HTMLElement>` | - | - |
| onDragOverCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDragStart | `DragEventHandler<HTMLElement>` | - | - |
| onDragStartCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDrop | `DragEventHandler<HTMLElement>` | - | - |
| onDropCapture | `DragEventHandler<HTMLElement>` | - | - |
| onDurationChange | `ReactEventHandler<HTMLElement>` | - | - |
| onDurationChangeCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onEmptied | `ReactEventHandler<HTMLElement>` | - | - |
| onEmptiedCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onEncrypted | `ReactEventHandler<HTMLElement>` | - | - |
| onEncryptedCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onEnded | `ReactEventHandler<HTMLElement>` | - | - |
| onEndedCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onError | `ReactEventHandler<HTMLElement>` | - | - |
| onErrorCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onFocus | `FocusEventHandler<HTMLElement>` | - | - |
| onFocusCapture | `FocusEventHandler<HTMLElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onInput | `FormEventHandler<HTMLElement>` | - | - |
| onInputCapture | `FormEventHandler<HTMLElement>` | - | - |
| onInvalid | `FormEventHandler<HTMLElement>` | - | - |
| onInvalidCapture | `FormEventHandler<HTMLElement>` | - | - |
| onKeyDown | `KeyboardEventHandler<HTMLElement>` | - | - |
| onKeyDownCapture | `KeyboardEventHandler<HTMLElement>` | - | - |
| onKeyPress | `KeyboardEventHandler<HTMLElement>` | - | @deprecated Use \`onKeyUp\` or \`onKeyDown\` instead |
| onKeyPressCapture | `KeyboardEventHandler<HTMLElement>` | - | @deprecated Use \`onKeyUpCapture\` or \`onKeyDownCapture\` instead |
| onKeyUp | `KeyboardEventHandler<HTMLElement>` | - | - |
| onKeyUpCapture | `KeyboardEventHandler<HTMLElement>` | - | - |
| onLoad | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadedData | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadedDataCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadedMetadata | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadedMetadataCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadStart | `ReactEventHandler<HTMLElement>` | - | - |
| onLoadStartCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLElement>` | - | - |
| onPaste | `ClipboardEventHandler<HTMLElement>` | - | - |
| onPasteCapture | `ClipboardEventHandler<HTMLElement>` | - | - |
| onPause | `ReactEventHandler<HTMLElement>` | - | - |
| onPauseCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onPlay | `ReactEventHandler<HTMLElement>` | - | - |
| onPlayCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onPlaying | `ReactEventHandler<HTMLElement>` | - | - |
| onPlayingCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLElement>` | - | - |
| onProgress | `ReactEventHandler<HTMLElement>` | - | - |
| onProgressCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onRateChange | `ReactEventHandler<HTMLElement>` | - | - |
| onRateChangeCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onReset | `FormEventHandler<HTMLElement>` | - | - |
| onResetCapture | `FormEventHandler<HTMLElement>` | - | - |
| onScroll | `UIEventHandler<HTMLElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLElement>` | - | - |
| onScrollEnd | `UIEventHandler<HTMLElement>` | - | - |
| onScrollEndCapture | `UIEventHandler<HTMLElement>` | - | - |
| onSeeked | `ReactEventHandler<HTMLElement>` | - | - |
| onSeekedCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onSeeking | `ReactEventHandler<HTMLElement>` | - | - |
| onSeekingCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onSelect | `ReactEventHandler<HTMLElement>` | - | - |
| onSelectCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onStalled | `ReactEventHandler<HTMLElement>` | - | - |
| onStalledCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onSubmit | `FormEventHandler<HTMLElement>` | - | - |
| onSubmitCapture | `FormEventHandler<HTMLElement>` | - | - |
| onSuspend | `ReactEventHandler<HTMLElement>` | - | - |
| onSuspendCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onTimeUpdate | `ReactEventHandler<HTMLElement>` | - | - |
| onTimeUpdateCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onToggle | `ToggleEventHandler<HTMLElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLElement>` | - | - |
| onVolumeChange | `ReactEventHandler<HTMLElement>` | - | - |
| onVolumeChangeCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onWaiting | `ReactEventHandler<HTMLElement>` | - | - |
| onWaitingCapture | `ReactEventHandler<HTMLElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLElement>` | - | - |
| part | `string` | - | @see \{@link https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/part} |
| popover | `"" \ | "auto" \ | "manual" \ | "hint"` | - | - |
| popoverTarget | `string` | - | - |
| popoverTargetAction | `"toggle" \ | "show" \ | "hide"` | - | - |
| prefix | `string` | - | - |
| property | `string` | - | - |
| radioGroup | `string` | - | - |
| rel | `string` | - | - |
| render | `DOMRenderFunction<any, any>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| resource | `string` | - | - |
| results | `number` | - | - |
| rev | `string` | - | - |
| role | `AriaRole` | - | - |
| security | `string` | - | - |
| slot | `string` | - | - |
| spellCheck | `Booleanish` | - | - |
| style | `CSSProperties` | - | - |
| suppressContentEditableWarning | `boolean` | - | - |
| suppressHydrationWarning | `boolean` | - | - |
| tabIndex | `number` | - | - |
| title | `string` | - | - |
| translate | `"yes" \ | "no"` | - | - |
| typeof | `string` | - | - |
| unselectable | `"off" \ | "on"` | - | - |
| vocab | `string` | - | - |