@base-ui-components/react/slider/thumb/SliderThumb.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import { BaseUIComponentProps } from "../../utils/types.js";
import { type LabelableContext } from "../../labelable-provider/LabelableContext.js";
import type { SliderRoot } from "../root/SliderRoot.js";
/**
 * The draggable part of the the slider at the tip of the indicator.
 * Renders a `<div>` element and a nested `<input type="range">`.
 *
 * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
 */
export declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLDivElement>>;
export interface ThumbMetadata {
  inputId: LabelableContext['controlId'];
}
export interface SliderThumbState extends SliderRoot.State {}
export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', SliderThumb.State>, 'onBlur' | 'onFocus'> {
  /**
   * Whether the thumb should ignore user interaction.
   * @default false
   */
  disabled?: boolean;
  /**
   * A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`.
   */
  getAriaLabel?: ((index: number) => string) | null;
  /**
   * A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
   * This is important for screen reader users.
   */
  getAriaValueText?: ((formattedValue: string, value: number, index: number) => string) | null;
  /**
   * The index of the thumb which corresponds to the index of its value in the
   * `value` or `defaultValue` array.
   * This prop is required to support server-side rendering for range sliders
   * with multiple thumbs.
   * @example
   * ```tsx
   * <Slider.Root value={[10, 20]}>
   *   <Slider.Thumb index={0} />
   *   <Slider.Thumb index={1} />
   * </Slider.Root>
   * ```
   */
  index?: number | undefined;
  /**
   * A ref to access the nested input element.
   */
  inputRef?: React.Ref<HTMLInputElement>;
  /**
   * A blur handler forwarded to the `input`.
   */
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
  /**
   * A focus handler forwarded to the `input`.
   */
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
  /**
   * Optional tab index attribute forwarded to the `input`.
   */
  tabIndex?: number;
}
export declare namespace SliderThumb {
  type State = SliderThumbState;
  type Props = SliderThumbProps;
}