@basic-ui/core 0.0.53 → 0.0.54

package/src/Slider/Slider.tsx

@@ -1,1120 +1,1120 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-
-/**
- * Welcome to @reach/slider!
- *
- * A UI input component where the user selects a value from within a given
- * range. A Slider has a handle that can be moved along a track to change its
- * value. When the user's mouse or focus is on the Slider's handle, the value
- * can be incremented with keyboard controls.
- *
- * Random thoughts/notes:
- *  - Currently testing this against the behavior of the native input range
- *    element to get our slider on par. We'll explore animated and multi-handle
- *    sliders next.
- *  - We may want to research some use cases for reversed sliders in RTL
- *    languages if that's a thing
- *
- * @see Docs     https://reach.tech/slider
- * @see Source   https://github.com/reach/reach-ui/tree/main/packages/slider
- * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#slider
- * @see Example  https://github.com/Stanko/aria-progress-range-slider
- * @see Example  http://www.oaa-accessibility.org/examplep/slider1/
- */
-
-import {
-  forwardRef,
-  memo,
-  useRef,
-  useState,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useId,
-} from 'react';
-import type { ReactNode, KeyboardEvent } from 'react';
-
-import { createContext } from '../utils/context';
-import type * as Polymorphic from '../utils/polymorphic';
-import { isRightClick } from '../utils/is-right-click';
-import { getOwnerDocument } from '../utils/owner-document';
-import { useStableLayoutCallback } from '../utils/use-stable-callback';
-import { assignMultipleRefs, wrapEvent } from '../utils';
-import { useControlledState } from '../hooks';
-
-const noop = () => {
-  /* noop */
-};
-
-type SliderOrientation = 'horizontal' | 'vertical';
-type SliderHandleAlignment = 'center' | 'contain';
-
-const [SliderProvider, useSliderContext] =
-  createContext<ISliderContext>('Slider');
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Slider
- *
- * @see Docs https://reach.tech/slider#slider
- */
-const Slider = forwardRef(function Slider(
-  { children, ...props },
-  forwardedRef
-) {
-  return (
-    <SliderInput {...props} ref={forwardedRef} data-reach-slider="">
-      <SliderTrack>
-        <SliderRange />
-        <SliderHandle />
-        {children}
-      </SliderTrack>
-    </SliderInput>
-  );
-}) as Polymorphic.ForwardRefComponent<'div', SliderProps>;
-
-/**
- * @see Docs https://reach.tech/slider#slider-props
- */
-interface SliderProps {
-  /**
-   * `Slider` can accept `SliderMarker` children to enhance display of specific
-   * values along the track.
-   *
-   * @see Docs https://reach.tech/slider#slider-children
-   */
-  children?: ReactNode;
-  /**
-   * The defaultValue is used to set an initial value for an uncontrolled
-   * Slider.
-   *
-   * @see Docs https://reach.tech/slider#slider-defaultvalue
-   */
-  defaultValue?: number;
-  /**
-   * @see Docs https://reach.tech/slider#slider-disabled
-   */
-  disabled?: boolean;
-  /**
-   * Whether or not the slider should be disabled from user interaction.
-   *
-   * @see Docs https://reach.tech/slider#slider-value
-   */
-  value?: number;
-  /**
-   * A function used to set a human-readable name for the slider.
-   *
-   * @see Docs https://reach.tech/slider#slider-getarialabel
-   */
-  getAriaLabel?(value: number): string;
-  /**
-   * A function used to set a human-readable value text based on the slider's
-   * current value.
-   *
-   * @see Docs https://reach.tech/slider#slider-getariavaluetext
-   */
-  getAriaValueText?(value: number): string;
-  /**
-   * When set to `center`, the slider's handle will be positioned directly
-   * centered over the slider's curremt value on the track. This means that when
-   * the slider is at its min or max value, a visiable slider handle will extend
-   * beyond the width (or height in vertical mode) of the slider track. When set
-   * to `contain`, the slider handle will always be contained within the bounds
-   * of the track, meaning its position will be slightly offset from the actual
-   * value depending on where it sits on the track.
-   *
-   * @see Docs https://reach.tech/slider#slider-handlealignment
-   */
-  handleAlignment?: SliderHandleAlignment;
-  /**
-   * The maximum value of the slider. Defaults to `100`.
-   *
-   * @see Docs https://reach.tech/slider#slider-max
-   */
-  max?: number;
-  /**
-   * The minimum value of the slider. Defaults to `0`.
-   *
-   * @see Docs https://reach.tech/slider#slider-min
-   */
-  min?: number;
-  /**
-   * If the slider is used as a form input, it should accept a `name` prop to
-   * identify its value in context of the form.
-   *
-   * @see Docs https://reach.tech/slider#slider-name
-   */
-  name?: string;
-  /**
-   * Callback that fires when the slider value changes. When the `value` prop is
-   * set, the Slider state becomes controlled and `onChange` must be used to
-   * update the value in response to user interaction.
-   *
-   * @see Docs https://reach.tech/slider#slider-onchange
-   */
-  onChange?(
-    e: SomePointerEvent | KeyboardEvent,
-    newValue: number,
-    props?: {
-      min?: number;
-      max?: number;
-      handlePosition?: string;
-    }
-  ): void;
-
-  // We use native DOM events for the slider since they are global
-  onMouseDown?(event: MouseEvent): void;
-  onMouseMove?(event: MouseEvent): void;
-  onMouseUp?(event: MouseEvent): void;
-  onPointerDown?(event: PointerEvent): void;
-  onPointerUp?(event: PointerEvent): void;
-  onTouchEnd?(event: TouchEvent): void;
-  onTouchMove?(event: TouchEvent): void;
-  onTouchStart?(event: TouchEvent): void;
-
-  /**
-   * Sets the slider to horizontal or vertical mode.
-   *
-   * @see Docs https://reach.tech/slider#slider-orientation
-   */
-  orientation?: SliderOrientation;
-  /**
-   * The step attribute is a number that specifies the granularity that the
-   * value must adhere to as it changes. Step sets minimum intervals of change,
-   * creating a "snap" effect when the handle is moved along the track.
-   *
-   * @see Docs https://reach.tech/slider#slider-step
-   */
-  step?: number;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * SliderInput
- *
- * The parent component of the slider interface. This is a lower level component
- * if you need more control over styles or rendering the slider's inner
- * components.
- *
- * @see Docs https://reach.tech/slider#sliderinput
- */
-const SliderInput = forwardRef(function SliderInput(
-  {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    'aria-valuetext': ariaValueTextProp,
-    as: Comp = 'div',
-    innerAs,
-    defaultValue,
-    disabled = false,
-    value: controlledValue,
-    getAriaLabel,
-    getAriaValueText,
-    handleAlignment = 'center',
-    max = 100,
-    min = 0,
-    name,
-    onChange: onChangeProp,
-    onKeyDown,
-    onMouseDown,
-    onMouseMove,
-    onMouseUp,
-    onPointerDown,
-    onPointerUp,
-    onTouchEnd,
-    onTouchMove,
-    onTouchStart,
-    orientation = 'horizontal',
-    step = 1,
-    children,
-    ...rest
-  },
-  forwardedRef
-) {
-  const touchId: TouchIdRef = useRef();
-
-  const fallbackId = useId();
-  const id = rest.id || fallbackId;
-
-  // Track whether or not the pointer is down without updating the component
-  const pointerDownRef = useRef(false);
-
-  const trackRef: TrackRef = useRef(null);
-  const handleRef: HandleRef = useRef(null);
-  const sliderRef: SliderRef = useRef(null);
-
-  const [hasFocus, setHasFocus] = useState(false);
-
-  const { ref: x, ...handleDimensions } = useDimensions(handleRef);
-
-  const [_value, onChange] = useControlledState(
-    controlledValue,
-    onChangeProp,
-    defaultValue || min,
-    (setValue) => (e, v) => setValue(v)
-  );
-  const value = clamp(_value, min, max);
-  const trackPercent = valueToPercent(value, min, max);
-  const isVertical = orientation === 'vertical';
-
-  const handleSize = isVertical
-    ? handleDimensions.height
-    : handleDimensions.width;
-
-  // TODO: Consider removing the `handleAlignment` prop
-  // We may want to use accept a `handlePosition` prop instead and let apps
-  // define their own positioning logic, similar to how we do for popovers.
-  const handlePosition = `calc(${trackPercent}% - ${
-    handleAlignment === 'center'
-      ? `${handleSize}px / 2`
-      : `${handleSize}px * ${trackPercent * 0.01}`
-  })`;
-  const handlePositionRef = useRef(handlePosition);
-  useLayoutEffect(() => {
-    handlePositionRef.current = handlePosition;
-  }, [handlePosition]);
-
-  const getNewValueFromEvent = useCallback(
-    (event: SomePointerEvent) => {
-      return getNewValue(getPointerPosition(event, touchId), trackRef.current, {
-        step,
-        orientation,
-        min,
-        max,
-      });
-    },
-    [max, min, orientation, step]
-  );
-
-  // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction
-  const handleKeyDown = useStableLayoutCallback((event: KeyboardEvent) => {
-    if (disabled) {
-      return;
-    }
-
-    let newValue: number;
-    const tenSteps = (max - min) / 10;
-    const keyStep = step || (max - min) / 100;
-
-    switch (event.key) {
-      // Decrease the value of the slider by one step.
-      case 'ArrowLeft':
-      case 'ArrowDown':
-        newValue = value - keyStep;
-        break;
-      // Increase the value of the slider by one step
-      case 'ArrowRight':
-      case 'ArrowUp':
-        newValue = value + keyStep;
-        break;
-      // Decrement the slider by an amount larger than the step change made by
-      // `ArrowDown`.
-      case 'PageDown':
-        newValue = value - tenSteps;
-        break;
-      // Increment the slider by an amount larger than the step change made by
-      // `ArrowUp`.
-      case 'PageUp':
-        newValue = value + tenSteps;
-        break;
-      // Set the slider to the first allowed value in its range.
-      case 'Home':
-        newValue = min;
-        break;
-      // Set the slider to the last allowed value in its range.
-      case 'End':
-        newValue = max;
-        break;
-      default:
-        return;
-    }
-
-    newValue = clamp(
-      step ? roundValueToStep(newValue, step, min) : newValue,
-      min,
-      max
-    );
-    onChange(event, newValue);
-  });
-
-  const ariaValueText = getAriaValueText
-    ? getAriaValueText(value)
-    : ariaValueTextProp;
-
-  const rangeStyle = { [isVertical ? 'height' : 'width']: `${trackPercent}%` };
-
-  // Slide events!
-  // We will try to use pointer events if they are supported to leverage
-  // setPointerCapture and releasePointerCapture. We'll fall back to separate
-  // mouse and touch events.
-  // TODO: This could be more concise
-  const removeMoveEvents = useRef<() => void>(noop);
-  const removeStartEvents = useRef<() => void>(noop);
-  const removeEndEvents = useRef<() => void>(noop);
-
-  // Store our event handlers in refs so we aren't attaching/detaching events
-  // on every render if the user doesn't useCallback
-  const appEvents = useRef({
-    onMouseMove,
-    onMouseDown,
-    onMouseUp,
-    onTouchStart,
-    onTouchEnd,
-    onTouchMove,
-    onPointerDown,
-    onPointerUp,
-  });
-  useLayoutEffect(() => {
-    appEvents.current.onMouseMove = onMouseMove;
-    appEvents.current.onMouseDown = onMouseDown;
-    appEvents.current.onMouseUp = onMouseUp;
-    appEvents.current.onTouchStart = onTouchStart;
-    appEvents.current.onTouchEnd = onTouchEnd;
-    appEvents.current.onTouchMove = onTouchMove;
-    appEvents.current.onPointerDown = onPointerDown;
-    appEvents.current.onPointerUp = onPointerUp;
-  }, [
-    onMouseMove,
-    onMouseDown,
-    onMouseUp,
-    onTouchStart,
-    onTouchEnd,
-    onTouchMove,
-    onPointerDown,
-    onPointerUp,
-  ]);
-
-  const handleSlideStart = useStableLayoutCallback(
-    (event: SomePointerEvent) => {
-      if (isRightClick(event)) return;
-
-      if (disabled) {
-        pointerDownRef.current = false;
-        return;
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const ownerDocument = getOwnerDocument(sliderRef.current)!;
-      const ownerWindow = ownerDocument.defaultView || window;
-      pointerDownRef.current = true;
-
-      if ((event as TouchEvent).changedTouches) {
-        // Prevent scrolling for touch events
-        event.preventDefault();
-        const touch = (event as TouchEvent).changedTouches?.[0];
-        if (touch != null) {
-          touchId.current = touch.identifier;
-        }
-      }
-
-      const newValue = getNewValueFromEvent(event);
-      if (newValue == null) {
-        return;
-      }
-      ownerWindow.requestAnimationFrame(() => handleRef.current?.focus());
-      onChange(event, newValue);
-
-      removeMoveEvents.current = addMoveListener();
-      removeEndEvents.current = addEndListener();
-    }
-  );
-
-  const setPointerCapture = useStableLayoutCallback((event: PointerEvent) => {
-    if (isRightClick(event)) return;
-    if (disabled) {
-      pointerDownRef.current = false;
-      return;
-    }
-    pointerDownRef.current = true;
-    sliderRef.current?.setPointerCapture(event.pointerId);
-  });
-
-  const releasePointerCapture = useStableLayoutCallback(
-    (event: PointerEvent) => {
-      if (isRightClick(event)) return;
-      sliderRef.current?.releasePointerCapture(event.pointerId);
-      pointerDownRef.current = false;
-    }
-  );
-
-  const handlePointerMove = useStableLayoutCallback(
-    (event: SomePointerEvent) => {
-      if (disabled || !pointerDownRef.current) {
-        pointerDownRef.current = false;
-        return;
-      }
-
-      const newValue = getNewValueFromEvent(event);
-      if (newValue == null) {
-        return;
-      }
-      onChange?.(event, newValue);
-    }
-  );
-
-  const handleSlideStop = useStableLayoutCallback((event: SomePointerEvent) => {
-    if (isRightClick(event)) return;
-
-    pointerDownRef.current = false;
-
-    const newValue = getNewValueFromEvent(event);
-    if (newValue == null) {
-      return;
-    }
-
-    touchId.current = undefined;
-
-    removeMoveEvents.current();
-    removeEndEvents.current();
-  });
-
-  const addMoveListener = useCallback(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const ownerDocument = getOwnerDocument(sliderRef.current)!;
-    const touchListener = wrapEvent(
-      appEvents.current.onTouchMove,
-      handlePointerMove
-    );
-    const mouseListener = wrapEvent(
-      appEvents.current.onMouseMove,
-      handlePointerMove
-    );
-    ownerDocument.addEventListener('touchmove', touchListener);
-    ownerDocument.addEventListener('mousemove', mouseListener);
-    return () => {
-      ownerDocument.removeEventListener('touchmove', touchListener);
-      ownerDocument.removeEventListener('mousemove', mouseListener);
-    };
-  }, [handlePointerMove]);
-
-  const addEndListener = useCallback(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const ownerDocument = getOwnerDocument(sliderRef.current)!;
-    const ownerWindow = ownerDocument.defaultView || window;
-    const pointerListener = wrapEvent(
-      appEvents.current.onPointerUp,
-      releasePointerCapture
-    );
-    const touchListener = wrapEvent(
-      appEvents.current.onTouchEnd,
-      handleSlideStop
-    );
-    const mouseListener = wrapEvent(
-      appEvents.current.onMouseUp,
-      handleSlideStop
-    );
-    if ('PointerEvent' in ownerWindow) {
-      ownerDocument.addEventListener('pointerup', pointerListener);
-    }
-    ownerDocument.addEventListener('touchend', touchListener);
-    ownerDocument.addEventListener('mouseup', mouseListener);
-    return () => {
-      if ('PointerEvent' in ownerWindow) {
-        ownerDocument.removeEventListener('pointerup', pointerListener);
-      }
-      ownerDocument.removeEventListener('touchend', touchListener);
-      ownerDocument.removeEventListener('mouseup', mouseListener);
-    };
-  }, [handleSlideStop, releasePointerCapture]);
-
-  const addStartListener = useCallback(() => {
-    // e.preventDefault is ignored by React's synthetic touchStart event, so
-    // we attach the listener directly to the DOM node
-    // https://github.com/facebook/react/issues/9809#issuecomment-413978405
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const sliderElement = sliderRef.current!;
-    if (!sliderElement) {
-      return noop;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const ownerDocument = getOwnerDocument(sliderElement)!;
-    const ownerWindow = ownerDocument.defaultView || window;
-    const touchListener = wrapEvent(
-      appEvents.current.onTouchStart,
-      handleSlideStart
-    );
-    const mouseListener = wrapEvent(
-      appEvents.current.onMouseDown,
-      handleSlideStart
-    );
-    const pointerListener = wrapEvent(
-      appEvents.current.onPointerDown,
-      setPointerCapture
-    );
-    sliderElement.addEventListener('touchstart', touchListener);
-    sliderElement.addEventListener('mousedown', mouseListener);
-    if ('PointerEvent' in ownerWindow) {
-      sliderElement.addEventListener('pointerdown', pointerListener);
-    }
-    return () => {
-      sliderElement.removeEventListener('touchstart', touchListener);
-      sliderElement.removeEventListener('mousedown', mouseListener);
-      if ('PointerEvent' in ownerWindow) {
-        sliderElement.removeEventListener('pointerdown', pointerListener);
-      }
-    };
-  }, [setPointerCapture, handleSlideStart]);
-
-  useEffect(() => {
-    removeStartEvents.current = addStartListener();
-
-    return () => {
-      removeStartEvents.current();
-      removeEndEvents.current();
-      removeMoveEvents.current();
-    };
-  }, [addStartListener]);
-
-  const inputFallbackId = useId();
-  const inputId = id || inputFallbackId;
-
-  return (
-    <SliderProvider
-      ariaLabel={getAriaLabel ? getAriaLabel(value) : ariaLabel}
-      ariaLabelledBy={ariaLabelledBy}
-      ariaValueText={ariaValueText}
-      handleDimensions={handleDimensions}
-      handleKeyDown={handleKeyDown}
-      handlePosition={handlePosition}
-      handleRef={handleRef}
-      hasFocus={hasFocus}
-      onKeyDown={onKeyDown}
-      setHasFocus={setHasFocus}
-      sliderId={id}
-      sliderMax={max}
-      sliderMin={min}
-      value={value}
-      disabled={!!disabled}
-      isVertical={isVertical}
-      orientation={orientation}
-      trackPercent={trackPercent}
-      trackRef={trackRef}
-      rangeStyle={rangeStyle}
-      updateValue={onChange}
-    >
-      <Comp
-        {...rest}
-        // @ts-ignore
-        as={innerAs}
-        ref={assignMultipleRefs(sliderRef, forwardedRef)}
-        data-reach-slider-input=""
-        data-disabled={disabled ? '' : undefined}
-        data-orientation={orientation}
-        tabIndex={-1}
-      >
-        {typeof children === 'function'
-          ? children({
-              hasFocus,
-              id,
-              max,
-              min,
-              value,
-              ariaValueText,
-            })
-          : children}
-        {name && (
-          // If the slider is used in a form we'll need an input field to
-          // capture the value. We'll assume this when the component is given a
-          // form field name (A `name` prop doesn't really make sense in any
-          // other context).
-          <input type="hidden" value={value} name={name} id={inputId} />
-        )}
-      </Comp>
-    </SliderProvider>
-  );
-}) as Polymorphic.ForwardRefComponent<'div', SliderInputProps>;
-
-/**
- * @see Docs https://reach.tech/slider#sliderinput-props
- */
-type SliderInputProps = Omit<SliderProps, 'children'> & {
-  /**
-   * Slider expects `<SliderTrack>` as its child; The track will accept all
-   * additional slider sub-components as children. It can also accept a
-   * function/render prop as its child to expose some of its internal state
-   * variables.
-   *
-   * @see Docs https://reach.tech/slider#sliderinput-children
-   */
-  children: ReactNode | SliderChildrenRender;
-};
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * SliderTrack
- *
- * @see Docs https://reach.tech/slider#slidertrack
- */
-const SliderTrackImpl = forwardRef(function SliderTrack(
-  { as: Comp = 'div', innerAs, children, style = {}, ...props },
-  forwardedRef
-) {
-  const { disabled, orientation, trackRef } = useSliderContext('SliderTrack');
-
-  return (
-    <Comp
-      ref={assignMultipleRefs(trackRef, forwardedRef)}
-      // @ts-ignore
-      as={innerAs}
-      style={{ ...style, position: 'relative' }}
-      {...props}
-      data-reach-slider-track=""
-      data-disabled={disabled ? '' : undefined}
-      data-orientation={orientation}
-    >
-      {children}
-    </Comp>
-  );
-}) as Polymorphic.ForwardRefComponent<'div', SliderTrackProps>;
-
-const SliderTrack = memo(SliderTrackImpl) as Polymorphic.MemoComponent<
-  'div',
-  SliderTrackProps
->;
-
-/**
- * @see Docs https://reach.tech/slider#slidertrack-props
- */
-interface SliderTrackProps {
-  /**
-   * `SliderTrack` expects `<SliderHandle>`, at minimum, for the Slider to
-   * function. All other Slider subcomponents should be passed as children
-   * inside the `SliderTrack`.
-   *
-   * @see Docs https://reach.tech/slider#slidertrack-children
-   */
-  children: ReactNode;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * SliderRange
- *
- * The (typically) highlighted portion of the track that represents the space
- * between the slider's `min` value and its current value.
- *
- * @see Docs https://reach.tech/slider#sliderrange
- */
-const SliderRangeImpl = forwardRef(function SliderRange(
-  { as: Comp = 'div', innerAs, children, style = {}, ...props },
-  forwardedRef
-) {
-  const { disabled, orientation, rangeStyle } = useSliderContext('SliderRange');
-  return (
-    <Comp
-      ref={forwardedRef}
-      // @ts-ignore
-      as={innerAs}
-      style={{ position: 'absolute', ...rangeStyle, ...style }}
-      {...props}
-      data-reach-slider-range=""
-      data-disabled={disabled ? '' : undefined}
-      data-orientation={orientation}
-    />
-  );
-}) as Polymorphic.ForwardRefComponent<'div', SliderRangeProps>;
-
-const SliderRange = memo(SliderRangeImpl) as Polymorphic.MemoComponent<
-  'div',
-  SliderRangeProps
->;
-
-/**
- * `SliderRange` accepts any props that a HTML div component accepts.
- * `SliderRange` will not accept or render any children.
- *
- * @see Docs https://reach.tech/slider#sliderrange-props
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface SliderRangeProps {}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * SliderHandle
- *
- * The handle that the user drags along the track to set the slider value.
- *
- * @see Docs https://reach.tech/slider#sliderhandle
- */
-const SliderHandleImpl = forwardRef(function SliderHandle(
-  {
-    // min,
-    // max,
-    as: Comp = 'div',
-    innerAs,
-    onBlur,
-    onFocus,
-    style = {},
-    onKeyDown,
-    ...props
-  },
-  forwardedRef
-) {
-  const {
-    ariaLabel,
-    ariaLabelledBy,
-    ariaValueText,
-    disabled,
-    handlePosition,
-    handleRef,
-    isVertical,
-    handleKeyDown,
-    orientation,
-    setHasFocus,
-    sliderMin,
-    sliderMax,
-    value,
-  } = useSliderContext('SliderHandle');
-
-  return (
-    <Comp
-      // @ts-ignore
-      as={innerAs}
-      aria-disabled={disabled || undefined}
-      // If the slider has a visible label, it is referenced by
-      // `aria-labelledby` on the slider element. Otherwise, the slider
-      // element has a label provided by `aria-label`.
-      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}
-      // If the slider is vertically oriented, it has `aria-orientation` set
-      // to vertical. The default value of `aria-orientation` for a slider is
-      // horizontal.
-      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-      aria-orientation={orientation}
-      // The slider element has the `aria-valuemax` property set to a decimal
-      // value representing the maximum allowed value of the slider.
-      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-      aria-valuemax={sliderMax}
-      // The slider element has the `aria-valuemin` property set to a decimal
-      // value representing the minimum allowed value of the slider.
-      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-      aria-valuemin={sliderMin}
-      // The slider element has the `aria-valuenow` property set to a decimal
-      // value representing the current value of the slider.
-      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-      aria-valuenow={value}
-      // If the value of `aria-valuenow` is not user-friendly, e.g., the day
-      // of the week is represented by a number, the `aria-valuetext` property
-      // is set to a string that makes the slider value understandable, e.g.,
-      // "Monday".
-      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-      aria-valuetext={ariaValueText}
-      // The element serving as the focusable slider control has role
-      // `slider`.
-      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-      role="slider"
-      tabIndex={disabled ? -1 : 0}
-      {...props}
-      data-reach-slider-handle=""
-      ref={assignMultipleRefs(handleRef, forwardedRef)}
-      onBlur={wrapEvent(onBlur, () => {
-        setHasFocus(false);
-      })}
-      onFocus={wrapEvent(onFocus, () => {
-        setHasFocus(true);
-      })}
-      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-      style={{
-        position: 'absolute',
-        ...(isVertical ? { bottom: handlePosition } : { left: handlePosition }),
-        ...style,
-      }}
-    />
-  );
-}) as Polymorphic.ForwardRefComponent<'div', SliderHandleProps>;
-
-const SliderHandle = memo(SliderHandleImpl) as Polymorphic.MemoComponent<
-  'div',
-  SliderHandleProps
->;
-
-/**
- * `SliderRange` accepts any props that a HTML div component accepts.
- *
- * @see Docs https://reach.tech/slider#sliderhandle-props
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface SliderHandleProps {}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * SliderMarker
- *
- * A fixed value marker. These can be used to illustrate a range of steps or
- * highlight important points along the slider track.
- *
- * @see Docs https://reach.tech/slider#slidermarker
- */
-const SliderMarkerImpl = forwardRef(function SliderMarker(
-  { as: Comp = 'div', innerAs, children, style = {}, value, ...props },
-  forwardedRef
-) {
-  const {
-    disabled,
-    isVertical,
-    orientation,
-    sliderMin,
-    sliderMax,
-    value: sliderValue,
-  } = useSliderContext('SliderMarker');
-
-  const inRange = value >= sliderMin && value <= sliderMax;
-  const absoluteStartPosition = `${valueToPercent(
-    value,
-    sliderMin,
-    sliderMax
-  )}%`;
-
-  const state =
-    value < sliderValue
-      ? 'under-value'
-      : value === sliderValue
-      ? 'at-value'
-      : 'over-value';
-
-  return inRange ? (
-    <Comp
-      ref={forwardedRef}
-      // @ts-ignore
-      as={innerAs}
-      style={{
-        position: 'absolute',
-        ...(isVertical
-          ? { bottom: absoluteStartPosition }
-          : { left: absoluteStartPosition }),
-        ...style,
-      }}
-      {...props}
-      data-reach-slider-marker=""
-      data-disabled={disabled ? '' : undefined}
-      data-orientation={orientation}
-      data-state={state}
-      data-value={value}
-    >
-      {children}
-    </Comp>
-  ) : null;
-}) as Polymorphic.ForwardRefComponent<'div', SliderMarkerProps>;
-
-const SliderMarker = memo(SliderMarkerImpl) as Polymorphic.MemoComponent<
-  'div',
-  SliderMarkerProps
->;
-
-/**
- * @see Docs https://reach.tech/slider#slidermarker-props
- */
-interface SliderMarkerProps {
-  /**
-   * The value to denote where the marker should appear along the track.
-   *
-   * @see Docs https://reach.tech/slider#slidermarker-value
-   */
-  value: number;
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-function clamp(val: number, min: number, max: number) {
-  return val > max ? max : val < min ? min : val;
-}
-
-/**
- * This handles the case when num is very small (0.00000001), js will turn
- * this into 1e-8. When num is bigger than 1 or less than -1 it won't get
- * converted to this notation so it's fine.
- *
- * @param num
- * @see https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/Slider.js#L69
- */
-function getDecimalPrecision(num: number) {
-  if (Math.abs(num) < 1) {
-    const parts = num.toExponential().split('e-');
-    const matissaDecimalPart = parts[0].split('.')[1];
-    return (
-      (matissaDecimalPart ? matissaDecimalPart.length : 0) +
-      parseInt(parts[1], 10)
-    );
-  }
-
-  const decimalPart = num.toString().split('.')[1];
-  return decimalPart ? decimalPart.length : 0;
-}
-
-function percentToValue(percent: number, min: number, max: number) {
-  return (max - min) * percent + min;
-}
-
-function roundValueToStep(value: number, step: number, min: number) {
-  const nearest = Math.round((value - min) / step) * step + min;
-  return Number(nearest.toFixed(getDecimalPrecision(step)));
-}
-
-function getPointerPosition(event: SomePointerEvent, touchId: TouchIdRef) {
-  if (touchId.current !== undefined && (event as TouchEvent).changedTouches) {
-    for (let i = 0; i < (event as TouchEvent).changedTouches.length; i += 1) {
-      const touch = (event as TouchEvent).changedTouches[i];
-      if (touch.identifier === touchId.current) {
-        return {
-          x: touch.clientX,
-          y: touch.clientY,
-        };
-      }
-    }
-
-    return false;
-  }
-
-  return {
-    x: (event as PointerEvent | MouseEvent).clientX,
-    y: (event as PointerEvent | MouseEvent).clientY,
-  };
-}
-
-function getNewValue(
-  handlePosition:
-    | {
-        x: number;
-        y: number;
-      }
-    | false,
-  track: HTMLElement | null,
-  props: {
-    orientation: SliderOrientation;
-    min: number;
-    max: number;
-    step?: number;
-  }
-) {
-  const { orientation, min, max, step } = props;
-
-  if (!track || !handlePosition) {
-    return null;
-  }
-
-  const { left, width, bottom, height } = track.getBoundingClientRect();
-  const isVertical = orientation === 'vertical';
-  const diff = isVertical ? bottom - handlePosition.y : handlePosition.x - left;
-  const percent = diff / (isVertical ? height : width);
-  const newValue = percentToValue(percent, min, max);
-
-  return clamp(
-    step ? roundValueToStep(newValue, step, min) : newValue,
-    min,
-    max
-  );
-}
-
-function useDimensions(ref: React.RefObject<HTMLElement | null>) {
-  const [{ width, height }, setDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
-  // Many existing `useDimensions` type hooks will use `getBoundingClientRect`
-  // getBoundingClientRect does not work here when borders are applied.
-  // getComputedStyle is not as performant so we may want to create a utility to
-  // check for any conflicts with box sizing first and only use
-  // `getComputedStyle` if neccessary.
-  /* const { width, height } = ref.current
-    ? ref.current.getBoundingClientRect()
-    : 0; */
-
-  useLayoutEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const ownerDocument = getOwnerDocument(ref.current)!;
-    const ownerWindow = ownerDocument.defaultView || window;
-    if (ref.current) {
-      const { height: _newHeight, width: _newWidth } =
-        ownerWindow.getComputedStyle(ref.current);
-      const newHeight = parseFloat(_newHeight);
-      const newWidth = parseFloat(_newWidth);
-
-      if (newHeight !== height || newWidth !== width) {
-        setDimensions({ height: newHeight, width: newWidth });
-      }
-    }
-  }, [ref, width, height]);
-  return { ref, width, height };
-}
-
-function valueToPercent(value: number, min: number, max: number) {
-  return ((value - min) * 100) / (max - min);
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Types
-
-type TrackRef = React.RefObject<HTMLDivElement | null>;
-type HandleRef = React.RefObject<HTMLDivElement | null>;
-type SliderRef = React.RefObject<HTMLDivElement | null>;
-type TouchIdRef = React.MutableRefObject<number | undefined>;
-
-type SomePointerEvent = TouchEvent | MouseEvent;
-
-interface ISliderContext {
-  ariaLabel: string | undefined;
-  ariaLabelledBy: string | undefined;
-  ariaValueText: string | undefined;
-  handleDimensions: {
-    width: number;
-    height: number;
-  };
-  handlePosition: string;
-  handleRef: HandleRef;
-  hasFocus: boolean;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-  handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-  setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;
-  sliderId: string | undefined;
-  sliderMax: number;
-  sliderMin: number;
-  value: number;
-  disabled: boolean;
-  isVertical: boolean;
-  orientation: SliderOrientation;
-  trackPercent: number;
-  trackRef: TrackRef;
-  rangeStyle: React.CSSProperties;
-  updateValue: (e: SomePointerEvent | KeyboardEvent, newValue: any) => void;
-}
-
-type SliderChildrenRender = (props: {
-  ariaValueText?: string | undefined;
-  hasFocus?: boolean;
-  id?: string | undefined;
-  sliderId?: string | undefined;
-  max?: number;
-  min?: number;
-  value?: number;
-}) => JSX.Element;
-
-////////////////////////////////////////////////////////////////////////////////
-// Exports
-
-export default Slider;
-export type {
-  SliderHandleProps,
-  SliderInputProps,
-  SliderMarkerProps,
-  SliderProps,
-  SliderRangeProps,
-  SliderTrackProps,
-  SliderHandleAlignment,
-  SliderOrientation,
-};
-export {
-  Slider,
-  SliderHandle,
-  SliderInput,
-  SliderMarker,
-  SliderTrack,
-  SliderRange,
-};
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+/**
+ * Welcome to @reach/slider!
+ *
+ * A UI input component where the user selects a value from within a given
+ * range. A Slider has a handle that can be moved along a track to change its
+ * value. When the user's mouse or focus is on the Slider's handle, the value
+ * can be incremented with keyboard controls.
+ *
+ * Random thoughts/notes:
+ *  - Currently testing this against the behavior of the native input range
+ *    element to get our slider on par. We'll explore animated and multi-handle
+ *    sliders next.
+ *  - We may want to research some use cases for reversed sliders in RTL
+ *    languages if that's a thing
+ *
+ * @see Docs     https://reach.tech/slider
+ * @see Source   https://github.com/reach/reach-ui/tree/main/packages/slider
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#slider
+ * @see Example  https://github.com/Stanko/aria-progress-range-slider
+ * @see Example  http://www.oaa-accessibility.org/examplep/slider1/
+ */
+
+import {
+  forwardRef,
+  memo,
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useId,
+} from 'react';
+import type { ReactNode, KeyboardEvent } from 'react';
+
+import { createContext } from '../utils/context';
+import type * as Polymorphic from '../utils/polymorphic';
+import { isRightClick } from '../utils/is-right-click';
+import { getOwnerDocument } from '../utils/owner-document';
+import { useStableLayoutCallback } from '../utils/use-stable-callback';
+import { assignMultipleRefs, wrapEvent } from '../utils';
+import { useControlledState } from '../hooks';
+
+const noop = () => {
+  /* noop */
+};
+
+type SliderOrientation = 'horizontal' | 'vertical';
+type SliderHandleAlignment = 'center' | 'contain';
+
+const [SliderProvider, useSliderContext] =
+  createContext<ISliderContext>('Slider');
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Slider
+ *
+ * @see Docs https://reach.tech/slider#slider
+ */
+const Slider = forwardRef(function Slider(
+  { children, ...props },
+  forwardedRef
+) {
+  return (
+    <SliderInput {...props} ref={forwardedRef} data-reach-slider="">
+      <SliderTrack>
+        <SliderRange />
+        <SliderHandle />
+        {children}
+      </SliderTrack>
+    </SliderInput>
+  );
+}) as Polymorphic.ForwardRefComponent<'div', SliderProps>;
+
+/**
+ * @see Docs https://reach.tech/slider#slider-props
+ */
+interface SliderProps {
+  /**
+   * `Slider` can accept `SliderMarker` children to enhance display of specific
+   * values along the track.
+   *
+   * @see Docs https://reach.tech/slider#slider-children
+   */
+  children?: ReactNode;
+  /**
+   * The defaultValue is used to set an initial value for an uncontrolled
+   * Slider.
+   *
+   * @see Docs https://reach.tech/slider#slider-defaultvalue
+   */
+  defaultValue?: number;
+  /**
+   * @see Docs https://reach.tech/slider#slider-disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether or not the slider should be disabled from user interaction.
+   *
+   * @see Docs https://reach.tech/slider#slider-value
+   */
+  value?: number;
+  /**
+   * A function used to set a human-readable name for the slider.
+   *
+   * @see Docs https://reach.tech/slider#slider-getarialabel
+   */
+  getAriaLabel?(value: number): string;
+  /**
+   * A function used to set a human-readable value text based on the slider's
+   * current value.
+   *
+   * @see Docs https://reach.tech/slider#slider-getariavaluetext
+   */
+  getAriaValueText?(value: number): string;
+  /**
+   * When set to `center`, the slider's handle will be positioned directly
+   * centered over the slider's curremt value on the track. This means that when
+   * the slider is at its min or max value, a visiable slider handle will extend
+   * beyond the width (or height in vertical mode) of the slider track. When set
+   * to `contain`, the slider handle will always be contained within the bounds
+   * of the track, meaning its position will be slightly offset from the actual
+   * value depending on where it sits on the track.
+   *
+   * @see Docs https://reach.tech/slider#slider-handlealignment
+   */
+  handleAlignment?: SliderHandleAlignment;
+  /**
+   * The maximum value of the slider. Defaults to `100`.
+   *
+   * @see Docs https://reach.tech/slider#slider-max
+   */
+  max?: number;
+  /**
+   * The minimum value of the slider. Defaults to `0`.
+   *
+   * @see Docs https://reach.tech/slider#slider-min
+   */
+  min?: number;
+  /**
+   * If the slider is used as a form input, it should accept a `name` prop to
+   * identify its value in context of the form.
+   *
+   * @see Docs https://reach.tech/slider#slider-name
+   */
+  name?: string;
+  /**
+   * Callback that fires when the slider value changes. When the `value` prop is
+   * set, the Slider state becomes controlled and `onChange` must be used to
+   * update the value in response to user interaction.
+   *
+   * @see Docs https://reach.tech/slider#slider-onchange
+   */
+  onChange?(
+    e: SomePointerEvent | KeyboardEvent,
+    newValue: number,
+    props?: {
+      min?: number;
+      max?: number;
+      handlePosition?: string;
+    }
+  ): void;
+
+  // We use native DOM events for the slider since they are global
+  onMouseDown?(event: MouseEvent): void;
+  onMouseMove?(event: MouseEvent): void;
+  onMouseUp?(event: MouseEvent): void;
+  onPointerDown?(event: PointerEvent): void;
+  onPointerUp?(event: PointerEvent): void;
+  onTouchEnd?(event: TouchEvent): void;
+  onTouchMove?(event: TouchEvent): void;
+  onTouchStart?(event: TouchEvent): void;
+
+  /**
+   * Sets the slider to horizontal or vertical mode.
+   *
+   * @see Docs https://reach.tech/slider#slider-orientation
+   */
+  orientation?: SliderOrientation;
+  /**
+   * The step attribute is a number that specifies the granularity that the
+   * value must adhere to as it changes. Step sets minimum intervals of change,
+   * creating a "snap" effect when the handle is moved along the track.
+   *
+   * @see Docs https://reach.tech/slider#slider-step
+   */
+  step?: number;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderInput
+ *
+ * The parent component of the slider interface. This is a lower level component
+ * if you need more control over styles or rendering the slider's inner
+ * components.
+ *
+ * @see Docs https://reach.tech/slider#sliderinput
+ */
+const SliderInput = forwardRef(function SliderInput(
+  {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-valuetext': ariaValueTextProp,
+    as: Comp = 'div',
+    innerAs,
+    defaultValue,
+    disabled = false,
+    value: controlledValue,
+    getAriaLabel,
+    getAriaValueText,
+    handleAlignment = 'center',
+    max = 100,
+    min = 0,
+    name,
+    onChange: onChangeProp,
+    onKeyDown,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+    onPointerDown,
+    onPointerUp,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
+    orientation = 'horizontal',
+    step = 1,
+    children,
+    ...rest
+  },
+  forwardedRef
+) {
+  const touchId: TouchIdRef = useRef();
+
+  const fallbackId = useId();
+  const id = rest.id || fallbackId;
+
+  // Track whether or not the pointer is down without updating the component
+  const pointerDownRef = useRef(false);
+
+  const trackRef: TrackRef = useRef(null);
+  const handleRef: HandleRef = useRef(null);
+  const sliderRef: SliderRef = useRef(null);
+
+  const [hasFocus, setHasFocus] = useState(false);
+
+  const { ref: x, ...handleDimensions } = useDimensions(handleRef);
+
+  const [_value, onChange] = useControlledState(
+    controlledValue,
+    onChangeProp,
+    defaultValue || min,
+    (setValue) => (e, v) => setValue(v)
+  );
+  const value = clamp(_value, min, max);
+  const trackPercent = valueToPercent(value, min, max);
+  const isVertical = orientation === 'vertical';
+
+  const handleSize = isVertical
+    ? handleDimensions.height
+    : handleDimensions.width;
+
+  // TODO: Consider removing the `handleAlignment` prop
+  // We may want to use accept a `handlePosition` prop instead and let apps
+  // define their own positioning logic, similar to how we do for popovers.
+  const handlePosition = `calc(${trackPercent}% - ${
+    handleAlignment === 'center'
+      ? `${handleSize}px / 2`
+      : `${handleSize}px * ${trackPercent * 0.01}`
+  })`;
+  const handlePositionRef = useRef(handlePosition);
+  useLayoutEffect(() => {
+    handlePositionRef.current = handlePosition;
+  }, [handlePosition]);
+
+  const getNewValueFromEvent = useCallback(
+    (event: SomePointerEvent) => {
+      return getNewValue(getPointerPosition(event, touchId), trackRef.current, {
+        step,
+        orientation,
+        min,
+        max,
+      });
+    },
+    [max, min, orientation, step]
+  );
+
+  // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction
+  const handleKeyDown = useStableLayoutCallback((event: KeyboardEvent) => {
+    if (disabled) {
+      return;
+    }
+
+    let newValue: number;
+    const tenSteps = (max - min) / 10;
+    const keyStep = step || (max - min) / 100;
+
+    switch (event.key) {
+      // Decrease the value of the slider by one step.
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        newValue = value - keyStep;
+        break;
+      // Increase the value of the slider by one step
+      case 'ArrowRight':
+      case 'ArrowUp':
+        newValue = value + keyStep;
+        break;
+      // Decrement the slider by an amount larger than the step change made by
+      // `ArrowDown`.
+      case 'PageDown':
+        newValue = value - tenSteps;
+        break;
+      // Increment the slider by an amount larger than the step change made by
+      // `ArrowUp`.
+      case 'PageUp':
+        newValue = value + tenSteps;
+        break;
+      // Set the slider to the first allowed value in its range.
+      case 'Home':
+        newValue = min;
+        break;
+      // Set the slider to the last allowed value in its range.
+      case 'End':
+        newValue = max;
+        break;
+      default:
+        return;
+    }
+
+    newValue = clamp(
+      step ? roundValueToStep(newValue, step, min) : newValue,
+      min,
+      max
+    );
+    onChange(event, newValue);
+  });
+
+  const ariaValueText = getAriaValueText
+    ? getAriaValueText(value)
+    : ariaValueTextProp;
+
+  const rangeStyle = { [isVertical ? 'height' : 'width']: `${trackPercent}%` };
+
+  // Slide events!
+  // We will try to use pointer events if they are supported to leverage
+  // setPointerCapture and releasePointerCapture. We'll fall back to separate
+  // mouse and touch events.
+  // TODO: This could be more concise
+  const removeMoveEvents = useRef<() => void>(noop);
+  const removeStartEvents = useRef<() => void>(noop);
+  const removeEndEvents = useRef<() => void>(noop);
+
+  // Store our event handlers in refs so we aren't attaching/detaching events
+  // on every render if the user doesn't useCallback
+  const appEvents = useRef({
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    onPointerDown,
+    onPointerUp,
+  });
+  useLayoutEffect(() => {
+    appEvents.current.onMouseMove = onMouseMove;
+    appEvents.current.onMouseDown = onMouseDown;
+    appEvents.current.onMouseUp = onMouseUp;
+    appEvents.current.onTouchStart = onTouchStart;
+    appEvents.current.onTouchEnd = onTouchEnd;
+    appEvents.current.onTouchMove = onTouchMove;
+    appEvents.current.onPointerDown = onPointerDown;
+    appEvents.current.onPointerUp = onPointerUp;
+  }, [
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    onPointerDown,
+    onPointerUp,
+  ]);
+
+  const handleSlideStart = useStableLayoutCallback(
+    (event: SomePointerEvent) => {
+      if (isRightClick(event)) return;
+
+      if (disabled) {
+        pointerDownRef.current = false;
+        return;
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const ownerDocument = getOwnerDocument(sliderRef.current)!;
+      const ownerWindow = ownerDocument.defaultView || window;
+      pointerDownRef.current = true;
+
+      if ((event as TouchEvent).changedTouches) {
+        // Prevent scrolling for touch events
+        event.preventDefault();
+        const touch = (event as TouchEvent).changedTouches?.[0];
+        if (touch != null) {
+          touchId.current = touch.identifier;
+        }
+      }
+
+      const newValue = getNewValueFromEvent(event);
+      if (newValue == null) {
+        return;
+      }
+      ownerWindow.requestAnimationFrame(() => handleRef.current?.focus());
+      onChange(event, newValue);
+
+      removeMoveEvents.current = addMoveListener();
+      removeEndEvents.current = addEndListener();
+    }
+  );
+
+  const setPointerCapture = useStableLayoutCallback((event: PointerEvent) => {
+    if (isRightClick(event)) return;
+    if (disabled) {
+      pointerDownRef.current = false;
+      return;
+    }
+    pointerDownRef.current = true;
+    sliderRef.current?.setPointerCapture(event.pointerId);
+  });
+
+  const releasePointerCapture = useStableLayoutCallback(
+    (event: PointerEvent) => {
+      if (isRightClick(event)) return;
+      sliderRef.current?.releasePointerCapture(event.pointerId);
+      pointerDownRef.current = false;
+    }
+  );
+
+  const handlePointerMove = useStableLayoutCallback(
+    (event: SomePointerEvent) => {
+      if (disabled || !pointerDownRef.current) {
+        pointerDownRef.current = false;
+        return;
+      }
+
+      const newValue = getNewValueFromEvent(event);
+      if (newValue == null) {
+        return;
+      }
+      onChange?.(event, newValue);
+    }
+  );
+
+  const handleSlideStop = useStableLayoutCallback((event: SomePointerEvent) => {
+    if (isRightClick(event)) return;
+
+    pointerDownRef.current = false;
+
+    const newValue = getNewValueFromEvent(event);
+    if (newValue == null) {
+      return;
+    }
+
+    touchId.current = undefined;
+
+    removeMoveEvents.current();
+    removeEndEvents.current();
+  });
+
+  const addMoveListener = useCallback(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const ownerDocument = getOwnerDocument(sliderRef.current)!;
+    const touchListener = wrapEvent(
+      appEvents.current.onTouchMove,
+      handlePointerMove
+    );
+    const mouseListener = wrapEvent(
+      appEvents.current.onMouseMove,
+      handlePointerMove
+    );
+    ownerDocument.addEventListener('touchmove', touchListener);
+    ownerDocument.addEventListener('mousemove', mouseListener);
+    return () => {
+      ownerDocument.removeEventListener('touchmove', touchListener);
+      ownerDocument.removeEventListener('mousemove', mouseListener);
+    };
+  }, [handlePointerMove]);
+
+  const addEndListener = useCallback(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const ownerDocument = getOwnerDocument(sliderRef.current)!;
+    const ownerWindow = ownerDocument.defaultView || window;
+    const pointerListener = wrapEvent(
+      appEvents.current.onPointerUp,
+      releasePointerCapture
+    );
+    const touchListener = wrapEvent(
+      appEvents.current.onTouchEnd,
+      handleSlideStop
+    );
+    const mouseListener = wrapEvent(
+      appEvents.current.onMouseUp,
+      handleSlideStop
+    );
+    if ('PointerEvent' in ownerWindow) {
+      ownerDocument.addEventListener('pointerup', pointerListener);
+    }
+    ownerDocument.addEventListener('touchend', touchListener);
+    ownerDocument.addEventListener('mouseup', mouseListener);
+    return () => {
+      if ('PointerEvent' in ownerWindow) {
+        ownerDocument.removeEventListener('pointerup', pointerListener);
+      }
+      ownerDocument.removeEventListener('touchend', touchListener);
+      ownerDocument.removeEventListener('mouseup', mouseListener);
+    };
+  }, [handleSlideStop, releasePointerCapture]);
+
+  const addStartListener = useCallback(() => {
+    // e.preventDefault is ignored by React's synthetic touchStart event, so
+    // we attach the listener directly to the DOM node
+    // https://github.com/facebook/react/issues/9809#issuecomment-413978405
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const sliderElement = sliderRef.current!;
+    if (!sliderElement) {
+      return noop;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const ownerDocument = getOwnerDocument(sliderElement)!;
+    const ownerWindow = ownerDocument.defaultView || window;
+    const touchListener = wrapEvent(
+      appEvents.current.onTouchStart,
+      handleSlideStart
+    );
+    const mouseListener = wrapEvent(
+      appEvents.current.onMouseDown,
+      handleSlideStart
+    );
+    const pointerListener = wrapEvent(
+      appEvents.current.onPointerDown,
+      setPointerCapture
+    );
+    sliderElement.addEventListener('touchstart', touchListener);
+    sliderElement.addEventListener('mousedown', mouseListener);
+    if ('PointerEvent' in ownerWindow) {
+      sliderElement.addEventListener('pointerdown', pointerListener);
+    }
+    return () => {
+      sliderElement.removeEventListener('touchstart', touchListener);
+      sliderElement.removeEventListener('mousedown', mouseListener);
+      if ('PointerEvent' in ownerWindow) {
+        sliderElement.removeEventListener('pointerdown', pointerListener);
+      }
+    };
+  }, [setPointerCapture, handleSlideStart]);
+
+  useEffect(() => {
+    removeStartEvents.current = addStartListener();
+
+    return () => {
+      removeStartEvents.current();
+      removeEndEvents.current();
+      removeMoveEvents.current();
+    };
+  }, [addStartListener]);
+
+  const inputFallbackId = useId();
+  const inputId = id || inputFallbackId;
+
+  return (
+    <SliderProvider
+      ariaLabel={getAriaLabel ? getAriaLabel(value) : ariaLabel}
+      ariaLabelledBy={ariaLabelledBy}
+      ariaValueText={ariaValueText}
+      handleDimensions={handleDimensions}
+      handleKeyDown={handleKeyDown}
+      handlePosition={handlePosition}
+      handleRef={handleRef}
+      hasFocus={hasFocus}
+      onKeyDown={onKeyDown}
+      setHasFocus={setHasFocus}
+      sliderId={id}
+      sliderMax={max}
+      sliderMin={min}
+      value={value}
+      disabled={!!disabled}
+      isVertical={isVertical}
+      orientation={orientation}
+      trackPercent={trackPercent}
+      trackRef={trackRef}
+      rangeStyle={rangeStyle}
+      updateValue={onChange}
+    >
+      <Comp
+        {...rest}
+        // @ts-ignore
+        as={innerAs}
+        ref={assignMultipleRefs(sliderRef, forwardedRef)}
+        data-reach-slider-input=""
+        data-disabled={disabled ? '' : undefined}
+        data-orientation={orientation}
+        tabIndex={-1}
+      >
+        {typeof children === 'function'
+          ? children({
+              hasFocus,
+              id,
+              max,
+              min,
+              value,
+              ariaValueText,
+            })
+          : children}
+        {name && (
+          // If the slider is used in a form we'll need an input field to
+          // capture the value. We'll assume this when the component is given a
+          // form field name (A `name` prop doesn't really make sense in any
+          // other context).
+          <input type="hidden" value={value} name={name} id={inputId} />
+        )}
+      </Comp>
+    </SliderProvider>
+  );
+}) as Polymorphic.ForwardRefComponent<'div', SliderInputProps>;
+
+/**
+ * @see Docs https://reach.tech/slider#sliderinput-props
+ */
+type SliderInputProps = Omit<SliderProps, 'children'> & {
+  /**
+   * Slider expects `<SliderTrack>` as its child; The track will accept all
+   * additional slider sub-components as children. It can also accept a
+   * function/render prop as its child to expose some of its internal state
+   * variables.
+   *
+   * @see Docs https://reach.tech/slider#sliderinput-children
+   */
+  children: ReactNode | SliderChildrenRender;
+};
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderTrack
+ *
+ * @see Docs https://reach.tech/slider#slidertrack
+ */
+const SliderTrackImpl = forwardRef(function SliderTrack(
+  { as: Comp = 'div', innerAs, children, style = {}, ...props },
+  forwardedRef
+) {
+  const { disabled, orientation, trackRef } = useSliderContext('SliderTrack');
+
+  return (
+    <Comp
+      ref={assignMultipleRefs(trackRef, forwardedRef)}
+      // @ts-ignore
+      as={innerAs}
+      style={{ ...style, position: 'relative' }}
+      {...props}
+      data-reach-slider-track=""
+      data-disabled={disabled ? '' : undefined}
+      data-orientation={orientation}
+    >
+      {children}
+    </Comp>
+  );
+}) as Polymorphic.ForwardRefComponent<'div', SliderTrackProps>;
+
+const SliderTrack = memo(SliderTrackImpl) as Polymorphic.MemoComponent<
+  'div',
+  SliderTrackProps
+>;
+
+/**
+ * @see Docs https://reach.tech/slider#slidertrack-props
+ */
+interface SliderTrackProps {
+  /**
+   * `SliderTrack` expects `<SliderHandle>`, at minimum, for the Slider to
+   * function. All other Slider subcomponents should be passed as children
+   * inside the `SliderTrack`.
+   *
+   * @see Docs https://reach.tech/slider#slidertrack-children
+   */
+  children: ReactNode;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderRange
+ *
+ * The (typically) highlighted portion of the track that represents the space
+ * between the slider's `min` value and its current value.
+ *
+ * @see Docs https://reach.tech/slider#sliderrange
+ */
+const SliderRangeImpl = forwardRef(function SliderRange(
+  { as: Comp = 'div', innerAs, children, style = {}, ...props },
+  forwardedRef
+) {
+  const { disabled, orientation, rangeStyle } = useSliderContext('SliderRange');
+  return (
+    <Comp
+      ref={forwardedRef}
+      // @ts-ignore
+      as={innerAs}
+      style={{ position: 'absolute', ...rangeStyle, ...style }}
+      {...props}
+      data-reach-slider-range=""
+      data-disabled={disabled ? '' : undefined}
+      data-orientation={orientation}
+    />
+  );
+}) as Polymorphic.ForwardRefComponent<'div', SliderRangeProps>;
+
+const SliderRange = memo(SliderRangeImpl) as Polymorphic.MemoComponent<
+  'div',
+  SliderRangeProps
+>;
+
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ * `SliderRange` will not accept or render any children.
+ *
+ * @see Docs https://reach.tech/slider#sliderrange-props
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface SliderRangeProps {}
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderHandle
+ *
+ * The handle that the user drags along the track to set the slider value.
+ *
+ * @see Docs https://reach.tech/slider#sliderhandle
+ */
+const SliderHandleImpl = forwardRef(function SliderHandle(
+  {
+    // min,
+    // max,
+    as: Comp = 'div',
+    innerAs,
+    onBlur,
+    onFocus,
+    style = {},
+    onKeyDown,
+    ...props
+  },
+  forwardedRef
+) {
+  const {
+    ariaLabel,
+    ariaLabelledBy,
+    ariaValueText,
+    disabled,
+    handlePosition,
+    handleRef,
+    isVertical,
+    handleKeyDown,
+    orientation,
+    setHasFocus,
+    sliderMin,
+    sliderMax,
+    value,
+  } = useSliderContext('SliderHandle');
+
+  return (
+    <Comp
+      // @ts-ignore
+      as={innerAs}
+      aria-disabled={disabled || undefined}
+      // If the slider has a visible label, it is referenced by
+      // `aria-labelledby` on the slider element. Otherwise, the slider
+      // element has a label provided by `aria-label`.
+      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}
+      // If the slider is vertically oriented, it has `aria-orientation` set
+      // to vertical. The default value of `aria-orientation` for a slider is
+      // horizontal.
+      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+      aria-orientation={orientation}
+      // The slider element has the `aria-valuemax` property set to a decimal
+      // value representing the maximum allowed value of the slider.
+      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+      aria-valuemax={sliderMax}
+      // The slider element has the `aria-valuemin` property set to a decimal
+      // value representing the minimum allowed value of the slider.
+      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+      aria-valuemin={sliderMin}
+      // The slider element has the `aria-valuenow` property set to a decimal
+      // value representing the current value of the slider.
+      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+      aria-valuenow={value}
+      // If the value of `aria-valuenow` is not user-friendly, e.g., the day
+      // of the week is represented by a number, the `aria-valuetext` property
+      // is set to a string that makes the slider value understandable, e.g.,
+      // "Monday".
+      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+      aria-valuetext={ariaValueText}
+      // The element serving as the focusable slider control has role
+      // `slider`.
+      // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+      role="slider"
+      tabIndex={disabled ? -1 : 0}
+      {...props}
+      data-reach-slider-handle=""
+      ref={assignMultipleRefs(handleRef, forwardedRef)}
+      onBlur={wrapEvent(onBlur, () => {
+        setHasFocus(false);
+      })}
+      onFocus={wrapEvent(onFocus, () => {
+        setHasFocus(true);
+      })}
+      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+      style={{
+        position: 'absolute',
+        ...(isVertical ? { bottom: handlePosition } : { left: handlePosition }),
+        ...style,
+      }}
+    />
+  );
+}) as Polymorphic.ForwardRefComponent<'div', SliderHandleProps>;
+
+const SliderHandle = memo(SliderHandleImpl) as Polymorphic.MemoComponent<
+  'div',
+  SliderHandleProps
+>;
+
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ *
+ * @see Docs https://reach.tech/slider#sliderhandle-props
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface SliderHandleProps {}
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderMarker
+ *
+ * A fixed value marker. These can be used to illustrate a range of steps or
+ * highlight important points along the slider track.
+ *
+ * @see Docs https://reach.tech/slider#slidermarker
+ */
+const SliderMarkerImpl = forwardRef(function SliderMarker(
+  { as: Comp = 'div', innerAs, children, style = {}, value, ...props },
+  forwardedRef
+) {
+  const {
+    disabled,
+    isVertical,
+    orientation,
+    sliderMin,
+    sliderMax,
+    value: sliderValue,
+  } = useSliderContext('SliderMarker');
+
+  const inRange = value >= sliderMin && value <= sliderMax;
+  const absoluteStartPosition = `${valueToPercent(
+    value,
+    sliderMin,
+    sliderMax
+  )}%`;
+
+  const state =
+    value < sliderValue
+      ? 'under-value'
+      : value === sliderValue
+      ? 'at-value'
+      : 'over-value';
+
+  return inRange ? (
+    <Comp
+      ref={forwardedRef}
+      // @ts-ignore
+      as={innerAs}
+      style={{
+        position: 'absolute',
+        ...(isVertical
+          ? { bottom: absoluteStartPosition }
+          : { left: absoluteStartPosition }),
+        ...style,
+      }}
+      {...props}
+      data-reach-slider-marker=""
+      data-disabled={disabled ? '' : undefined}
+      data-orientation={orientation}
+      data-state={state}
+      data-value={value}
+    >
+      {children}
+    </Comp>
+  ) : null;
+}) as Polymorphic.ForwardRefComponent<'div', SliderMarkerProps>;
+
+const SliderMarker = memo(SliderMarkerImpl) as Polymorphic.MemoComponent<
+  'div',
+  SliderMarkerProps
+>;
+
+/**
+ * @see Docs https://reach.tech/slider#slidermarker-props
+ */
+interface SliderMarkerProps {
+  /**
+   * The value to denote where the marker should appear along the track.
+   *
+   * @see Docs https://reach.tech/slider#slidermarker-value
+   */
+  value: number;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+function clamp(val: number, min: number, max: number) {
+  return val > max ? max : val < min ? min : val;
+}
+
+/**
+ * This handles the case when num is very small (0.00000001), js will turn
+ * this into 1e-8. When num is bigger than 1 or less than -1 it won't get
+ * converted to this notation so it's fine.
+ *
+ * @param num
+ * @see https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/Slider.js#L69
+ */
+function getDecimalPrecision(num: number) {
+  if (Math.abs(num) < 1) {
+    const parts = num.toExponential().split('e-');
+    const matissaDecimalPart = parts[0].split('.')[1];
+    return (
+      (matissaDecimalPart ? matissaDecimalPart.length : 0) +
+      parseInt(parts[1], 10)
+    );
+  }
+
+  const decimalPart = num.toString().split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+
+function percentToValue(percent: number, min: number, max: number) {
+  return (max - min) * percent + min;
+}
+
+function roundValueToStep(value: number, step: number, min: number) {
+  const nearest = Math.round((value - min) / step) * step + min;
+  return Number(nearest.toFixed(getDecimalPrecision(step)));
+}
+
+function getPointerPosition(event: SomePointerEvent, touchId: TouchIdRef) {
+  if (touchId.current !== undefined && (event as TouchEvent).changedTouches) {
+    for (let i = 0; i < (event as TouchEvent).changedTouches.length; i += 1) {
+      const touch = (event as TouchEvent).changedTouches[i];
+      if (touch.identifier === touchId.current) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY,
+        };
+      }
+    }
+
+    return false;
+  }
+
+  return {
+    x: (event as PointerEvent | MouseEvent).clientX,
+    y: (event as PointerEvent | MouseEvent).clientY,
+  };
+}
+
+function getNewValue(
+  handlePosition:
+    | {
+        x: number;
+        y: number;
+      }
+    | false,
+  track: HTMLElement | null,
+  props: {
+    orientation: SliderOrientation;
+    min: number;
+    max: number;
+    step?: number;
+  }
+) {
+  const { orientation, min, max, step } = props;
+
+  if (!track || !handlePosition) {
+    return null;
+  }
+
+  const { left, width, bottom, height } = track.getBoundingClientRect();
+  const isVertical = orientation === 'vertical';
+  const diff = isVertical ? bottom - handlePosition.y : handlePosition.x - left;
+  const percent = diff / (isVertical ? height : width);
+  const newValue = percentToValue(percent, min, max);
+
+  return clamp(
+    step ? roundValueToStep(newValue, step, min) : newValue,
+    min,
+    max
+  );
+}
+
+function useDimensions(ref: React.RefObject<HTMLElement | null>) {
+  const [{ width, height }, setDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  // Many existing `useDimensions` type hooks will use `getBoundingClientRect`
+  // getBoundingClientRect does not work here when borders are applied.
+  // getComputedStyle is not as performant so we may want to create a utility to
+  // check for any conflicts with box sizing first and only use
+  // `getComputedStyle` if neccessary.
+  /* const { width, height } = ref.current
+    ? ref.current.getBoundingClientRect()
+    : 0; */
+
+  useLayoutEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const ownerDocument = getOwnerDocument(ref.current)!;
+    const ownerWindow = ownerDocument.defaultView || window;
+    if (ref.current) {
+      const { height: _newHeight, width: _newWidth } =
+        ownerWindow.getComputedStyle(ref.current);
+      const newHeight = parseFloat(_newHeight);
+      const newWidth = parseFloat(_newWidth);
+
+      if (newHeight !== height || newWidth !== width) {
+        setDimensions({ height: newHeight, width: newWidth });
+      }
+    }
+  }, [ref, width, height]);
+  return { ref, width, height };
+}
+
+function valueToPercent(value: number, min: number, max: number) {
+  return ((value - min) * 100) / (max - min);
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Types
+
+type TrackRef = React.RefObject<HTMLDivElement | null>;
+type HandleRef = React.RefObject<HTMLDivElement | null>;
+type SliderRef = React.RefObject<HTMLDivElement | null>;
+type TouchIdRef = React.MutableRefObject<number | undefined>;
+
+type SomePointerEvent = TouchEvent | MouseEvent;
+
+interface ISliderContext {
+  ariaLabel: string | undefined;
+  ariaLabelledBy: string | undefined;
+  ariaValueText: string | undefined;
+  handleDimensions: {
+    width: number;
+    height: number;
+  };
+  handlePosition: string;
+  handleRef: HandleRef;
+  hasFocus: boolean;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+  handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+  setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;
+  sliderId: string | undefined;
+  sliderMax: number;
+  sliderMin: number;
+  value: number;
+  disabled: boolean;
+  isVertical: boolean;
+  orientation: SliderOrientation;
+  trackPercent: number;
+  trackRef: TrackRef;
+  rangeStyle: React.CSSProperties;
+  updateValue: (e: SomePointerEvent | KeyboardEvent, newValue: any) => void;
+}
+
+type SliderChildrenRender = (props: {
+  ariaValueText?: string | undefined;
+  hasFocus?: boolean;
+  id?: string | undefined;
+  sliderId?: string | undefined;
+  max?: number;
+  min?: number;
+  value?: number;
+}) => JSX.Element;
+
+////////////////////////////////////////////////////////////////////////////////
+// Exports
+
+export default Slider;
+export type {
+  SliderHandleProps,
+  SliderInputProps,
+  SliderMarkerProps,
+  SliderProps,
+  SliderRangeProps,
+  SliderTrackProps,
+  SliderHandleAlignment,
+  SliderOrientation,
+};
+export {
+  Slider,
+  SliderHandle,
+  SliderInput,
+  SliderMarker,
+  SliderTrack,
+  SliderRange,
+};