import * as React from 'react'; import { BaseUIComponentProps } from "../../internals/types.mjs"; import { type LabelableContext } from "../../internals/labelable-provider/LabelableContext.mjs"; import type { SliderRootState } from "../root/SliderRoot.mjs"; /** * The draggable part of the slider at the tip of the indicator. * Renders a `
` element and a nested ``. * * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider) */ export declare const SliderThumb: React.ForwardRefExoticComponent & React.RefAttributes>; export interface ThumbMetadata { inputId: LabelableContext['controlId']; } export interface SliderThumbState extends SliderRootState {} export interface SliderThumbProps extends Omit, 'onBlur' | 'onFocus' | 'onKeyDown'> { /** * Whether the thumb should ignore user interaction. * @default false */ disabled?: boolean | undefined; /** * A string value forwarded to the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`. * Ignored when `getAriaValueText` is provided. */ 'aria-valuetext'?: React.AriaAttributes['aria-valuetext'] | undefined; /** * 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 | undefined; /** * 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 | undefined; /** * 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 * * * * * ``` */ index?: number | undefined; /** * A ref to access the nested input element. */ inputRef?: React.Ref | undefined; /** * A blur handler forwarded to the `input`. */ onBlur?: React.FocusEventHandler | undefined; /** * A focus handler forwarded to the `input`. */ onFocus?: React.FocusEventHandler | undefined; /** * A keydown handler forwarded to the `input`. */ onKeyDown?: React.KeyboardEventHandler | undefined; /** * Optional tab index attribute forwarded to the `input`. */ tabIndex?: number | undefined; } export declare namespace SliderThumb { type State = SliderThumbState; type Props = SliderThumbProps; }