slider-thumb.json

{
  "name": "SliderThumb",
  "description": "The draggable part of the the slider at the tip of the indicator.\nRenders a `<div>` element.",
  "props": {
    "aria-label": {
      "type": "string",
      "description": "The label for the input element."
    },
    "aria-labelledby": {
      "type": "string"
    },
    "name": {
      "type": "string"
    },
    "active": {
      "type": "number",
      "description": "The index of the active thumb."
    },
    "aria-valuetext": {
      "type": "string",
      "description": "A string value that provides a user-friendly name for the current value of the slider."
    },
    "getAriaLabel": {
      "type": "((index: number) => string) | null",
      "description": "Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb"
    },
    "getAriaValueText": {
      "type": "((formattedValue: string, value: number, index: number) => string) | null",
      "description": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.\nThis is important for screen reader users."
    },
    "handleInputChange": {
      "type": "((valueInput: number, index: number, event: KeyboardEvent<Element> | ChangeEvent<Element>) => void)"
    },
    "inputId": {
      "type": "string"
    },
    "onBlur": {
      "type": "FocusEventHandler<Element>"
    },
    "onFocus": {
      "type": "FocusEventHandler<Element>"
    },
    "onKeyDown": {
      "type": "KeyboardEventHandler<Element>"
    },
    "onPointerLeave": {
      "type": "PointerEventHandler<Element>"
    },
    "onPointerOver": {
      "type": "PointerEventHandler<Element>"
    },
    "tabIndex": {
      "type": "number | null",
      "default": "null",
      "description": "Optional tab index attribute for the thumb components."
    },
    "values": {
      "type": "number[]",
      "description": "The value(s) of the slider"
    },
    "step": {
      "type": "number",
      "default": "1",
      "description": "The step increment of the slider when incrementing or decrementing. It will snap\nto multiples of this value. Decimal values are supported."
    },
    "largeStep": {
      "type": "number",
      "default": "10",
      "description": "The large step value of the slider when incrementing or decrementing while the shift key is held,\nor when using Page-Up or Page-Down keys. Snaps to multiples of this value."
    },
    "minStepsBetweenValues": {
      "type": "number",
      "description": "The minimum steps between values in a range slider."
    },
    "min": {
      "type": "number",
      "description": "The minimum allowed value of the slider."
    },
    "max": {
      "type": "number",
      "description": "The maximum allowed value of the slider."
    },
    "format": {
      "type": "NumberFormatOptions | null",
      "default": "null",
      "description": "Options to format the input value."
    },
    "disabled": {
      "type": "boolean"
    },
    "orientation": {
      "type": "Orientation",
      "default": "'horizontal'",
      "description": "The component orientation."
    },
    "id": {
      "type": "string"
    },
    "className": {
      "type": "string | ((state: State) => string)",
      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
    },
    "render": {
      "type": "((props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, inputProps: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, state: State) => ReactElement) | ReactElement & { ref: Ref<Element> }",
      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
    }
  },
  "dataAttributes": {
    "data-dragging": {
      "description": "Present while the user is dragging."
    },
    "data-orientation": {
      "description": "Indicates the orientation of the slider.",
      "type": "'horizontal' | 'vertical'"
    },
    "data-disabled": {
      "description": "Present when the slider is disabled."
    },
    "data-readonly": {
      "description": "Present when the slider is readonly."
    },
    "data-required": {
      "description": "Present when the slider is required."
    },
    "data-valid": {
      "description": "Present when the slider is in valid state (when wrapped in Field.Root)."
    },
    "data-invalid": {
      "description": "Present when the slider is in invalid state (when wrapped in Field.Root)."
    },
    "data-dirty": {
      "description": "Present when the slider's value has changed (when wrapped in Field.Root)."
    },
    "data-touched": {
      "description": "Present when the slider has been touched (when wrapped in Field.Root)."
    },
    "data-focused": {
      "description": "Present when the slider is focused (when wrapped in Field.Root)."
    },
    "data-index": {
      "description": "Indicates the index of the thumb in range sliders."
    }
  },
  "cssVariables": {}
}