@base-ui-components/react
Version:
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.
191 lines (190 loc) • 7.14 kB
TypeScript
import * as React from 'react';
import type { TextDirection } from '../../direction-provider/DirectionContext.js';
export declare function focusThumb({ sliderRef, activeIndex, setActive, }: {
sliderRef: React.RefObject<any>;
activeIndex: number;
setActive?: (num: number) => void;
}): void;
export declare function validateMinimumDistance(values: number | readonly number[], step: number, minStepsBetweenValues: number): boolean;
export declare function trackFinger(event: TouchEvent | PointerEvent | React.PointerEvent, touchIdRef: React.RefObject<any>): false | {
x: number;
y: number;
};
/**
*/
export declare function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRoot.ReturnValue;
export declare namespace useSliderRoot {
type Orientation = 'horizontal' | 'vertical';
interface Parameters {
/**
* The id of the slider element.
*/
id?: string;
/**
* The id of the element containing a label for the slider.
*/
'aria-labelledby'?: string;
/**
* The default value. Use when the component is not controlled.
*/
defaultValue?: number | ReadonlyArray<number>;
/**
* Sets the direction. For right-to-left languages, the lowest value is on the right-hand side.
* @default 'ltr'
*/
direction: TextDirection;
/**
* Whether the component should ignore user interaction.
* @default false
*/
disabled?: boolean;
/**
* The maximum allowed value of the slider.
* Should not be equal to min.
* @default 100
*/
max?: number;
/**
* The minimum allowed value of the slider.
* Should not be equal to max.
* @default 0
*/
min?: number;
/**
* The minimum steps between values in a range slider.
* @default 0
*/
minStepsBetweenValues?: number;
/**
* Identifies the field when a form is submitted.
*/
name?: string;
/**
* Callback function that is fired when the slider's value changed.
*
* @param {number | number[]} value The new value.
* @param {Event} event The corresponding event that initiated the change.
* You can pull out the new value by accessing `event.target.value` (any).
* @param {number} activeThumbIndex Index of the currently moved thumb.
*/
onValueChange?: (value: number | number[], event: Event, activeThumbIndex: number) => void;
/**
* Callback function that is fired when the `pointerup` is triggered.
*
* @param {number | number[]} value The new value.
* @param {Event} event The corresponding event that initiated the change.
* **Warning**: This is a generic event not a change event.
*/
onValueCommitted?: (value: number | number[], event: Event) => void;
/**
* The component orientation.
* @default 'horizontal'
*/
orientation?: Orientation;
/**
* The ref attached to the root of the Slider.
*/
rootRef?: React.Ref<Element>;
/**
* The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
* @default 10
*/
largeStep?: number;
/**
* The granularity with which the slider can step through values. (A "discrete" slider.)
* The `min` prop serves as the origin for the valid values.
* We recommend (max - min) to be evenly divisible by the step.
* @default 1
*/
step?: number;
/**
* Tab index attribute of the Thumb component's `input` element.
*/
tabIndex?: number;
/**
* The value of the slider.
* For ranged sliders, provide an array with two values.
*/
value?: number | ReadonlyArray<number>;
}
interface ReturnValue {
getRootProps: (externalProps?: React.ComponentPropsWithRef<'div'>) => React.ComponentPropsWithRef<'div'>;
/**
* The index of the active thumb.
*/
active: number;
/**
* A function that compares a new value with the internal value of the slider.
* The internal value is potentially unsorted, e.g. to support frozen arrays: https://github.com/mui/material-ui/pull/28472
*/
areValuesEqual: (newValue: number | ReadonlyArray<number>) => boolean;
'aria-labelledby'?: string;
changeValue: (valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => void;
dragging: boolean;
direction: TextDirection;
disabled: boolean;
getFingerNewValue: (args: {
finger: {
x: number;
y: number;
};
move?: boolean;
offset?: number;
activeIndex?: number;
}) => {
newValue: number | number[];
activeIndex: number;
newPercentageValue: number;
} | null;
handleValueChange: (value: number | number[], activeThumb: number, event: React.SyntheticEvent | Event) => void;
inputIdMap: Map<number, string>;
/**
* The large step value of the slider when incrementing or decrementing while the shift key is held,
* or when using Page-Up or Page-Down keys. Snaps to multiples of this value.
* @default 10
*/
largeStep: number;
/**
* The maximum allowed value of the slider.
*/
max: number;
/**
* The minimum allowed value of the slider.
*/
min: number;
/**
* The minimum steps between values in a range slider.
*/
minStepsBetweenValues: number;
name?: string;
onValueCommitted?: (value: number | number[], event: Event) => void;
/**
* The component orientation.
* @default 'horizontal'
*/
orientation: Orientation;
registerInputId: (index: number, id: string | undefined) => {
deregister: (index: number) => void;
};
registerSliderControl: (element: HTMLElement | null) => void;
/**
* The value(s) of the slider as percentages
*/
percentageValues: readonly number[];
setActive: (activeIndex: number) => void;
setDragging: (isDragging: boolean) => void;
setValueState: (newValue: number | number[]) => void;
/**
* The step increment of the slider when incrementing or decrementing. It will snap
* to multiples of this value. Decimal values are supported.
* @default 1
*/
step: number;
thumbRefs: React.MutableRefObject<(HTMLElement | null)[]>;
tabIndex?: number;
/**
* The value(s) of the slider
*/
values: readonly number[];
}
}