@itwin/itwinui-react/esm/core/Slider/Thumb.d.ts

A react component library for iTwinUI

import * as React from 'react';
import { Tooltip } from '../Tooltip/Tooltip.js';
type ThumbProps = {
    /**
     * Thumb value.
     */
    value: number;
    /**
     * Index of Thumb Value in Slider `values`.
     */
    index: number;
    /**
     * Minimum value for Thumb.
     */
    minVal: number;
    /**
     * Maximum value for Thumb.
     */
    maxVal: number;
    /**
     * Step value defines the value to increment Thumb value by during keyboard processing.
     */
    step: number;
    /**
     * Minimum value allowed for Slider.
     */
    sliderMin: number;
    /**
     * Maximum value allowed for Slider.
     */
    sliderMax: number;
    /**
     * true if the Thumb is being moved by pointer events.
     */
    isActive: boolean;
    /**
     * true if the Thumb is disabled.
     */
    disabled?: boolean;
    /**
     * Callback to invoke when Thumb receives a pointer down event.
     */
    onThumbActivated: (index: number) => void;
    /**
     * Callback to invoke when keyboard is used to modify Thumb value.
     */
    onThumbValueChanged: (index: number, value: number, keyboardReleased: boolean) => void;
    /**
     * Additional tooltip props.
     */
    tooltipProps: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;
    /**
     * Additional props for Thumb.
     */
    thumbProps?: React.ComponentPropsWithRef<'div'>;
};
/**
 * Thumb is a local component used to show and modify the values maintained by the Slider.
 * Only one Thumb can be active at a time. A Thumb is made active when the user selects
 * it with pointer. Whenever a Thumb is active, focused, or hovered its tooltip is shown.
 */
export declare const Thumb: (props: ThumbProps) => React.JSX.Element;
export {};