@base-ui-components/react/esm/slider/thumb/useSliderThumb.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 { GenericHTMLProps } from '../../utils/types.js';
import type { useSliderRoot } from '../root/useSliderRoot.js';
export declare function useSliderThumb(parameters: useSliderThumb.Parameters): useSliderThumb.ReturnValue;
export declare namespace useSliderThumb {
    interface Parameters extends Pick<useSliderRoot.ReturnValue, 'active' | 'aria-labelledby' | 'changeValue' | 'direction' | 'largeStep' | 'max' | 'min' | 'minStepsBetweenValues' | 'name' | 'orientation' | 'percentageValues' | 'registerInputId' | 'step' | 'tabIndex' | 'values'> {
        /**
         * The label for the input element.
         */
        'aria-label'?: string;
        /**
         * A string value that provides a user-friendly name for the current value of the slider.
         */
        'aria-valuetext'?: string;
        /**
         * Options to format the input value.
         */
        format?: Intl.NumberFormatOptions;
        /**
         * Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb
         * @param {number} index The index of the input
         * @returns {string}
         */
        getAriaLabel?: (index: number) => string;
        /**
         * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
         * This is important for screen reader users.
         * @param {string} formattedValue The thumb's formatted value.
         * @param {number} value The thumb's numerical value.
         * @param {number} index The thumb's index.
         * @returns {string}
         */
        getAriaValueText?: (formattedValue: string, value: number, index: number) => string;
        id?: React.HTMLAttributes<Element>['id'];
        inputId?: React.HTMLAttributes<Element>['id'];
        disabled: boolean;
        onBlur?: React.FocusEventHandler;
        onFocus?: React.FocusEventHandler;
        onKeyDown?: React.KeyboardEventHandler;
        rootRef?: React.Ref<Element>;
    }
    interface ReturnValue {
        getRootProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
        getThumbInputProps: (externalProps?: React.ComponentPropsWithRef<'input'>) => React.ComponentPropsWithRef<'input'>;
        index: number;
        disabled: boolean;
    }
}