@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.
141 lines • 4.43 kB
TypeScript
import * as React from 'react';
import type { BaseUIComponentProps, Orientation } from "../../utils/types.js";
import type { FieldRoot } from "../../field/root/FieldRoot.js";
/**
* Groups all parts of the slider.
* Renders a `<div>` element.
*
* Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
*/
export declare const SliderRoot: {
<Value extends number | readonly number[]>(props: SliderRoot.Props<Value> & {
ref?: React.RefObject<HTMLDivElement>;
}): React.JSX.Element;
};
export declare namespace SliderRoot {
interface State extends FieldRoot.State {
/**
* The index of the active thumb.
*/
activeThumbIndex: number;
/**
* Whether the component should ignore user interaction.
*/
disabled: boolean;
/**
* Whether the thumb is currently being dragged.
*/
dragging: boolean;
max: number;
min: number;
/**
* The minimum steps between values in a range slider.
* @default 0
*/
minStepsBetweenValues: number;
/**
* The component orientation.
*/
orientation: Orientation;
/**
* 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;
/**
* The raw number value of the slider.
*/
values: readonly number[];
}
interface Props<Value extends number | readonly number[] = number | readonly number[]> extends BaseUIComponentProps<'div', State> {
/**
* The uncontrolled value of the slider when it’s initially rendered.
*
* To render a controlled slider, use the `value` prop instead.
*/
defaultValue?: Value;
/**
* Whether the slider should ignore user interaction.
* @default false
*/
disabled?: boolean;
/**
* Options to format the input value.
*/
format?: Intl.NumberFormatOptions;
/**
* A ref to access the hidden input element.
*/
inputRef?: React.Ref<HTMLInputElement>;
/**
* The locale used by `Intl.NumberFormat` when formatting the value.
* Defaults to the user's runtime locale.
*/
locale?: Intl.LocalesArgument;
/**
* 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;
/**
* The component orientation.
* @default 'horizontal'
*/
orientation?: Orientation;
/**
* 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;
/**
* 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;
/**
* Optional tab index attribute for the thumb components.
*/
tabIndex?: number;
/**
* The value of the slider.
* For ranged sliders, provide an array with two values.
*/
value?: Value;
/**
* 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: Value extends number ? number : Value, 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: Value extends number ? number : Value, event: Event) => void;
}
}