@base-ui-components/react/esm/slider/value/useSliderValue.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 { formatNumber } from '../../utils/formatNumber.js';
import { mergeReactProps } from '../../utils/mergeReactProps.js';
export function useSliderValue(parameters) {
  const {
    'aria-live': ariaLive = 'off',
    format: formatParam,
    inputIdMap,
    values
  } = parameters;
  const outputFor = React.useMemo(() => {
    const size = inputIdMap.size;
    let htmlFor = '';
    for (let i = 0; i < size; i += 1) {
      const inputId = inputIdMap.get(i);
      if (!inputId) {
        break;
      }
      htmlFor += `${inputId} `;
    }
    return htmlFor.trim() === '' ? undefined : htmlFor.trim();
  }, [inputIdMap]);
  const formattedValues = React.useMemo(() => {
    const arr = [];
    for (let i = 0; i < values.length; i += 1) {
      arr.push(formatNumber(values[i], [], Array.isArray(formatParam) ? formatParam[i] : formatParam));
    }
    return arr;
  }, [formatParam, values]);
  const getRootProps = React.useCallback((externalProps = {}) => {
    return mergeReactProps(externalProps, {
      // off by default because it will keep announcing when the slider is being dragged
      // and also when the value is changing (but not yet committed)
      'aria-live': ariaLive,
      htmlFor: outputFor
    });
  }, [ariaLive, outputFor]);
  return React.useMemo(() => ({
    getRootProps,
    formattedValues
  }), [getRootProps, formattedValues]);
}