@base-ui-components/react/cjs/slider/root/SliderRoot.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 { BaseUIComponentProps } from '../../utils/types.js';
import type { FieldRoot } from '../../field/root/FieldRoot.js';
import { useSliderRoot } from './useSliderRoot.js';
/**
 * Groups all parts of the slider.
 * Renders a `<div>` element.
 *
 * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
 */
declare const SliderRoot: React.ForwardRefExoticComponent<SliderRoot.Props & React.RefAttributes<HTMLDivElement>>;
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: useSliderRoot.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: ReadonlyArray<number>;
    }
    interface Props extends Pick<useSliderRoot.Parameters, 'disabled' | 'max' | 'min' | 'minStepsBetweenValues' | 'name' | 'onValueChange' | 'onValueCommitted' | 'orientation' | 'largeStep' | 'step' | 'value'>, Omit<BaseUIComponentProps<'div', State>, 'defaultValue' | 'onChange' | 'values'> {
        /**
         * The uncontrolled value of the slider when it’s initially rendered.
         *
         * To render a controlled slider, use the `value` prop instead.
         */
        defaultValue?: number | ReadonlyArray<number>;
        /**
         * Whether the component should ignore user interaction.
         * @default false
         */
        disabled?: boolean;
        /**
         * Options to format the input value.
         */
        format?: Intl.NumberFormatOptions;
        /**
         * The value of the slider.
         * For ranged sliders, provide an array with two values.
         */
        value?: number | ReadonlyArray<number>;
    }
}
export { SliderRoot };