@base-ui-components/react/esm/slider/root/SliderRoot.js

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.

'use client';

import * as React from 'react';
import PropTypes from 'prop-types';
import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
import { CompositeList } from '../../composite/list/CompositeList.js';
import { useDirection } from '../../direction-provider/DirectionContext.js';
import { sliderStyleHookMapping } from './styleHooks.js';
import { useSliderRoot } from './useSliderRoot.js';
import { SliderRootContext } from './SliderRootContext.js';
import { useFieldRootContext } from '../../field/root/FieldRootContext.js';

/**
 * Groups all parts of the slider.
 * Renders a `<div>` element.
 *
 * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
 */
import { jsx as _jsx } from "react/jsx-runtime";
const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(props, forwardedRef) {
  const {
    'aria-labelledby': ariaLabelledby,
    className,
    defaultValue,
    disabled: disabledProp = false,
    id,
    format,
    largeStep,
    render,
    max,
    min,
    minStepsBetweenValues,
    name,
    onValueChange,
    onValueCommitted,
    orientation = 'horizontal',
    step,
    tabIndex,
    value,
    ...otherProps
  } = props;
  const direction = useDirection();
  const {
    labelId,
    state: fieldState,
    disabled: fieldDisabled
  } = useFieldRootContext();
  const disabled = fieldDisabled || disabledProp;
  const {
    getRootProps,
    ...slider
  } = useSliderRoot({
    'aria-labelledby': ariaLabelledby ?? labelId,
    defaultValue,
    direction,
    disabled,
    id,
    largeStep,
    max,
    min,
    minStepsBetweenValues,
    name,
    onValueChange,
    onValueCommitted,
    orientation,
    rootRef: forwardedRef,
    step,
    tabIndex,
    value
  });
  const state = React.useMemo(() => ({
    ...fieldState,
    activeThumbIndex: slider.active,
    disabled,
    dragging: slider.dragging,
    orientation,
    max: slider.max,
    min: slider.min,
    minStepsBetweenValues: slider.minStepsBetweenValues,
    step: slider.step,
    values: slider.values
  }), [fieldState, disabled, orientation, slider.active, slider.dragging, slider.max, slider.min, slider.minStepsBetweenValues, slider.step, slider.values]);
  const contextValue = React.useMemo(() => ({
    ...slider,
    format,
    state
  }), [slider, format, state]);
  const {
    renderElement
  } = useComponentRenderer({
    propGetter: getRootProps,
    render: render ?? 'div',
    state,
    className,
    extraProps: otherProps,
    customStyleHookMapping: sliderStyleHookMapping
  });
  return /*#__PURE__*/_jsx(SliderRootContext.Provider, {
    value: contextValue,
    children: /*#__PURE__*/_jsx(CompositeList, {
      elementsRef: slider.thumbRefs,
      children: renderElement()
    })
  });
});
export { SliderRoot };
process.env.NODE_ENV !== "production" ? SliderRoot.propTypes /* remove-proptypes */ = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Identifies the element (or elements) that labels the current element.
   * @see aria-describedby.
   */
  'aria-labelledby': PropTypes.string,
  /**
   * @ignore
   */
  children: PropTypes.node,
  /**
   * CSS class applied to the element, or a function that
   * returns a class based on the component’s state.
   */
  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  /**
   * The uncontrolled value of the slider when it’s initially rendered.
   *
   * To render a controlled slider, use the `value` prop instead.
   */
  defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
  /**
   * Whether the component should ignore user interaction.
   * @default false
   */
  disabled: PropTypes.bool,
  /**
   * Options to format the input value.
   */
  format: PropTypes.shape({
    compactDisplay: PropTypes.oneOf(['long', 'short']),
    currency: PropTypes.string,
    currencyDisplay: PropTypes.oneOf(['code', 'name', 'narrowSymbol', 'symbol']),
    currencySign: PropTypes.oneOf(['accounting', 'standard']),
    localeMatcher: PropTypes.oneOf(['best fit', 'lookup']),
    maximumFractionDigits: PropTypes.number,
    maximumSignificantDigits: PropTypes.number,
    minimumFractionDigits: PropTypes.number,
    minimumIntegerDigits: PropTypes.number,
    minimumSignificantDigits: PropTypes.number,
    notation: PropTypes.oneOf(['compact', 'engineering', 'scientific', 'standard']),
    numberingSystem: PropTypes.string,
    signDisplay: PropTypes.oneOf(['always', 'auto', 'exceptZero', 'never']),
    style: PropTypes.oneOf(['currency', 'decimal', 'percent', 'unit']),
    unit: PropTypes.string,
    unitDisplay: PropTypes.oneOf(['long', 'narrow', 'short']),
    useGrouping: PropTypes.bool
  }),
  /**
   * @ignore
   */
  id: PropTypes.string,
  /**
   * 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: PropTypes.number,
  /**
   * The maximum allowed value of the slider.
   * Should not be equal to min.
   * @default 100
   */
  max: PropTypes.number,
  /**
   * The minimum allowed value of the slider.
   * Should not be equal to max.
   * @default 0
   */
  min: PropTypes.number,
  /**
   * The minimum steps between values in a range slider.
   * @default 0
   */
  minStepsBetweenValues: PropTypes.number,
  /**
   * Identifies the field when a form is submitted.
   */
  name: PropTypes.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: PropTypes.func,
  /**
   * 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: PropTypes.func,
  /**
   * The component orientation.
   * @default 'horizontal'
   */
  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
  /**
   * Allows you to replace the component’s HTML element
   * with a different tag, or compose it with another component.
   *
   * Accepts a `ReactElement` or a function that returns the element to render.
   */
  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
  /**
   * 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: PropTypes.number,
  /**
   * @ignore
   */
  tabIndex: PropTypes.number,
  /**
   * The value of the slider.
   * For ranged sliders, provide an array with two values.
   */
  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])
} : void 0;