@base-ui-components/react/slider/root/SliderRootContext.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 type { Orientation } from "../../utils/types.js";
import type { CompositeMetadata } from "../../composite/list/CompositeList.js";
import type { useFieldControlValidation } from "../../field/control/useFieldControlValidation.js";
import type { ThumbMetadata } from "../thumb/SliderThumb.js";
import type { SliderRoot } from "./SliderRoot.js";
import type { BaseUIEventDetails } from "../../utils/createBaseUIEventDetails.js";
export interface SliderRootContext {
  /**
   * The index of the active thumb.
   */
  active: number;
  dragging: boolean;
  disabled: boolean;
  fieldControlValidation: useFieldControlValidation.ReturnValue;
  pressedInputRef: React.RefObject<HTMLInputElement | null>;
  formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
  handleInputChange: (valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => void;
  labelId?: 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;
  lastChangedValueRef: React.RefObject<number | readonly number[] | null>;
  /**
   * 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.
   */
  max: number;
  /**
   * The minimum allowed value of the slider.
   */
  min: number;
  /**
   * The minimum steps between values in a range slider.
   */
  minStepsBetweenValues: number;
  /**
   * Function to be called when drag ends and the pointer is released.
   */
  onValueCommitted: (newValue: number | readonly number[], data: BaseUIEventDetails<'none'>) => void;
  /**
   * The component orientation.
   * @default 'horizontal'
   */
  orientation: Orientation;
  /**
   * Whether the slider is a range slider.
   */
  range: boolean;
  registerFieldControlRef: React.RefCallback<Element> | null;
  setActive: React.Dispatch<React.SetStateAction<number>>;
  setDragging: React.Dispatch<React.SetStateAction<boolean>>;
  /**
   * Callback fired when dragging and invokes onValueChange.
   */
  setValue: (newValue: number | number[], activeThumb: number, event: Event) => void;
  state: SliderRoot.State;
  /**
   * 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;
  thumbMap: Map<Node, CompositeMetadata<ThumbMetadata> | null>;
  thumbRefs: React.RefObject<(HTMLElement | null)[]>;
  /**
   * The value(s) of the slider
   */
  values: readonly number[];
}
export declare const SliderRootContext: React.Context<SliderRootContext | undefined>;
export declare function useSliderRootContext(): SliderRootContext;