Function SliderBase

packages/@react-spectrum/s2/src/Slider.tsx:360–444

(
  props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}
)

});

export function SliderBase<T extends number | number[]>(
  props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}
): ReactNode {
  let formContext = useContext(FormContext);
  props = useFormProps(props);
  let {
    label,
    labelPosition = 'top',
    labelAlign = 'start',
    size = 'M',
    minValue = 0,
    maxValue = 100
  } = props;
  let {direction} = useLocale();

  return (
    <AriaSlider
      {...props}
      ref={props.sliderRef}
      className={renderProps =>
        (props.UNSAFE_className || '') +
        mergeStyles(
          style(field())({labelPosition, isInForm: !!formContext}),
          slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles)
        )
      }>
      {({state}) => {
        let maxLabelLength = 0;
        switch (state.values.length) {
          case 1:
            maxLabelLength = Math.max(
              [...state.getFormattedValue(minValue)].length,
              [...state.getFormattedValue(maxValue)].length
            );
            break;
          case 2:
            maxLabelLength = Math.max(
              [...state.getFormattedValue([minValue, minValue + (props.step || 1)])].length,
              [...state.getFormattedValue([maxValue - (props.step || 1), maxValue])].length
            );
            break;
          default:
            throw new Error('Only sliders with 1 or 2 handles are supported!');
        }

        let outputValue = (
          <SliderOutput
            style={{
              width: `${maxLabelLength}ch`,
              minWidth: `${maxLabelLength}ch`,
              fontVariantNumeric: 'tabular-nums'
            }}
            className={output({direction, labelPosition, isInForm: !!formContext})}
          />
        );

        return (
          <>