@octanejs/base-ui 0.1.50 → 0.1.52

package/dist/cjs/slider.cjs

@@ -1,1384 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var slider_exports = {};
-__export(slider_exports, {
-  Slider: () => Slider
-});
-module.exports = __toCommonJS(slider_exports);
-var import_octane = require("octane");
-var import_internal = require("./internal.cjs");
-var import_useRenderElement = require("./utils/useRenderElement.cjs");
-var import_mergeProps = require("./utils/mergeProps.cjs");
-var import_composeRefs = require("./utils/composeRefs.cjs");
-var import_useControlled = require("./utils/useControlled.cjs");
-var import_useStableCallback = require("./utils/useStableCallback.cjs");
-var import_useValueAsRef = require("./utils/useValueAsRef.cjs");
-var import_useValueChanged = require("./utils/useValueChanged.cjs");
-var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
-var import_useAnimationFrame = require("./utils/useAnimationFrame.cjs");
-var import_clamp = require("./utils/clamp.cjs");
-var import_areArraysEqual = require("./utils/areArraysEqual.cjs");
-var import_contains = require("./utils/contains.cjs");
-var import_addEventListener = require("./utils/addEventListener.cjs");
-var import_owner = require("./utils/owner.cjs");
-var import_visuallyHidden = require("./utils/visuallyHidden.cjs");
-var import_valueToPercent = require("./utils/valueToPercent.cjs");
-var import_formatNumber = require("./utils/formatNumber.cjs");
-var import_matchesFocusVisible = require("./utils/matchesFocusVisible.cjs");
-var import_useIsHydrating = require("./utils/useIsHydrating.cjs");
-var import_list_utils = require("./utils/composite/list-utils.cjs");
-var import_CompositeList = require("./utils/composite/CompositeList.cjs");
-var import_useCompositeListItem = require("./utils/composite/useCompositeListItem.cjs");
-var import_keys = require("./utils/composite/keys.cjs");
-var import_DirectionContext = require("./utils/DirectionContext.cjs");
-var import_constants = require("./utils/field/constants.cjs");
-var import_FieldRootContext = require("./utils/field/FieldRootContext.cjs");
-var import_FormContext = require("./utils/field/FormContext.cjs");
-var import_LabelableContext = require("./utils/field/LabelableContext.cjs");
-var import_useLabelableId = require("./utils/field/useLabelableId.cjs");
-var import_useLabel = require("./utils/field/useLabel.cjs");
-var import_useRegisterFieldControl = require("./utils/field/useRegisterFieldControl.cjs");
-var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
-var import_asc = require("./utils/slider/asc.cjs");
-var import_getSliderValue = require("./utils/slider/getSliderValue.cjs");
-var import_getMidpoint = require("./utils/slider/getMidpoint.cjs");
-var import_roundValueToStep = require("./utils/slider/roundValueToStep.cjs");
-var import_validateMinimumDistance = require("./utils/slider/validateMinimumDistance.cjs");
-var import_resolveThumbCollision = require("./utils/slider/resolveThumbCollision.cjs");
-var import_resolveAriaLabelledBy = require("./utils/resolveAriaLabelledBy.cjs");
-const ALL_KEYS = /* @__PURE__ */ new Set([...import_keys.COMPOSITE_KEYS, import_keys.PAGE_UP, import_keys.PAGE_DOWN]);
-const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
-function isElementNode(target) {
-  return target != null && target instanceof Element;
-}
-function isHTMLElementNode(target) {
-  return target != null && target instanceof HTMLElement;
-}
-const sliderStateAttributesMapping = {
-  activeThumbIndex: () => null,
-  max: () => null,
-  min: () => null,
-  minStepsBetweenValues: () => null,
-  step: () => null,
-  values: () => null,
-  ...import_constants.fieldValidityMapping
-};
-const SliderRootContext = (0, import_octane.createContext)(void 0);
-function useSliderRootContext() {
-  const context = (0, import_octane.useContext)(SliderRootContext);
-  if (context === void 0) {
-    throw new Error(
-      "Base UI: SliderRootContext is missing. Slider parts must be placed within <Slider.Root>."
-    );
-  }
-  return context;
-}
-function getSliderChangeEventReason(event) {
-  return "key" in event ? import_createChangeEventDetails.REASONS.keyboard : import_createChangeEventDetails.REASONS.inputChange;
-}
-function areValuesEqual(newValue, oldValue) {
-  if (typeof newValue === "number" && typeof oldValue === "number") {
-    return newValue === oldValue;
-  }
-  if (Array.isArray(newValue) && Array.isArray(oldValue)) {
-    return (0, import_areArraysEqual.areArraysEqual)(newValue, oldValue);
-  }
-  return false;
-}
-function SliderRoot(componentProps) {
-  const slot = (0, import_internal.S)("SliderRoot");
-  const {
-    "aria-labelledby": ariaLabelledByProp,
-    className,
-    defaultValue,
-    disabled: disabledProp = false,
-    id: idProp,
-    format,
-    largeStep = 10,
-    locale,
-    render,
-    max = 100,
-    min = 0,
-    minStepsBetweenValues = 0,
-    form,
-    name: nameProp,
-    onValueChange: onValueChangeProp,
-    onValueCommitted: onValueCommittedProp,
-    orientation = "horizontal",
-    step = 1,
-    thumbCollisionBehavior = "push",
-    thumbAlignment = "center",
-    value: valueProp,
-    style,
-    ref,
-    ...elementProps
-  } = componentProps;
-  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
-  const defaultLabelId = (0, import_resolveAriaLabelledBy.getDefaultLabelId)(id);
-  const onValueChange = (0, import_useStableCallback.useStableCallback)(onValueChangeProp, (0, import_internal.subSlot)(slot, "onChange"));
-  const onValueCommitted = (0, import_useStableCallback.useStableCallback)(onValueCommittedProp, (0, import_internal.subSlot)(slot, "onCommit"));
-  const { clearErrors } = (0, import_FormContext.useFormContext)();
-  const {
-    state: fieldState,
-    disabled: fieldDisabled,
-    name: fieldName,
-    setTouched,
-    setDirty,
-    validityData,
-    validation
-  } = (0, import_FieldRootContext.useFieldRootContext)();
-  const { labelId: fieldLabelId } = (0, import_LabelableContext.useLabelableContext)();
-  const [labelId, setLabelId] = (0, import_octane.useState)(void 0, (0, import_internal.subSlot)(slot, "labelId"));
-  const ariaLabelledby = ariaLabelledByProp ?? (0, import_resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, labelId);
-  const disabled = fieldDisabled || disabledProp;
-  const name = fieldName ?? nameProp;
-  const [valueUnwrapped, setValueUnwrapped] = (0, import_useControlled.useControlled)(
-    { controlled: valueProp, default: defaultValue ?? min, name: "Slider" },
-    (0, import_internal.subSlot)(slot, "value")
-  );
-  const sliderRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "sliderRef"));
-  const controlRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "controlRef"));
-  const thumbRefs = (0, import_octane.useRef)([], (0, import_internal.subSlot)(slot, "thumbRefs"));
-  const pressedInputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "pressedInput"));
-  const pressedThumbCenterOffsetRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "pressedOffset"));
-  const pressedThumbIndexRef = (0, import_octane.useRef)(-1, (0, import_internal.subSlot)(slot, "pressedIndex"));
-  const pressedValuesRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "pressedValues"));
-  const lastChangeReasonRef = (0, import_octane.useRef)("none", (0, import_internal.subSlot)(slot, "lastReason"));
-  const formatOptionsRef = (0, import_useValueAsRef.useValueAsRef)(
-    format,
-    (0, import_internal.subSlot)(slot, "fmtRef")
-  );
-  const [active, setActiveState] = (0, import_octane.useState)(-1, (0, import_internal.subSlot)(slot, "active"));
-  const [lastUsedThumbIndex, setLastUsedThumbIndex] = (0, import_octane.useState)(-1, (0, import_internal.subSlot)(slot, "lastUsed"));
-  const [dragging, setDragging] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "dragging"));
-  const [thumbMap, setThumbMap] = (0, import_octane.useState)(() => /* @__PURE__ */ new Map(), (0, import_internal.subSlot)(slot, "thumbMap"));
-  const [indicatorPosition, setIndicatorPosition] = (0, import_octane.useState)(
-    [void 0, void 0],
-    (0, import_internal.subSlot)(slot, "indicatorPos")
-  );
-  const setActive = (0, import_useStableCallback.useStableCallback)(
-    (value) => {
-      setActiveState(value);
-      if (value !== -1) {
-        setLastUsedThumbIndex(value);
-      }
-    },
-    (0, import_internal.subSlot)(slot, "setActive")
-  );
-  (0, import_useRegisterFieldControl.useRegisterFieldControl)(
-    validation.inputRef,
-    id,
-    valueUnwrapped,
-    void 0,
-    !disabled,
-    nameProp,
-    (0, import_internal.subSlot)(slot, "register")
-  );
-  (0, import_useValueChanged.useValueChanged)(
-    valueUnwrapped,
-    () => {
-      clearErrors(name);
-      validation.change(valueUnwrapped);
-      const initialValue = validityData.initialValue;
-      let isDirty;
-      if (Array.isArray(valueUnwrapped) && Array.isArray(initialValue)) {
-        isDirty = !(0, import_areArraysEqual.areArraysEqual)(valueUnwrapped, initialValue);
-      } else {
-        isDirty = valueUnwrapped !== initialValue;
-      }
-      setDirty(isDirty);
-    },
-    (0, import_internal.subSlot)(slot, "valueChanged")
-  );
-  const registerFieldControlRef = (0, import_useStableCallback.useStableCallback)(
-    (element2) => {
-      if (element2) {
-        controlRef.current = element2;
-      }
-    },
-    (0, import_internal.subSlot)(slot, "regRef")
-  );
-  const range = Array.isArray(valueUnwrapped);
-  const values = (0, import_octane.useMemo)(
-    () => {
-      if (!range) {
-        return [(0, import_clamp.clamp)(valueUnwrapped, min, max)];
-      }
-      return valueUnwrapped.slice().sort(import_asc.asc);
-    },
-    [max, min, range, valueUnwrapped],
-    (0, import_internal.subSlot)(slot, "values")
-  );
-  const setValue = (0, import_useStableCallback.useStableCallback)(
-    (newValue, details) => {
-      if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped)) {
-        return false;
-      }
-      const changeDetails = details ?? (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, void 0, void 0, { activeThumbIndex: -1 });
-      const nativeEvent = changeDetails.event;
-      const EventConstructor = nativeEvent.constructor ?? Event;
-      let clonedEvent;
-      try {
-        clonedEvent = new EventConstructor(nativeEvent.type, nativeEvent);
-      } catch {
-        clonedEvent = new Event(nativeEvent.type);
-      }
-      Object.defineProperty(clonedEvent, "target", {
-        writable: true,
-        value: { value: newValue, name }
-      });
-      changeDetails.event = clonedEvent;
-      onValueChange(newValue, changeDetails);
-      if (changeDetails.isCanceled) {
-        return false;
-      }
-      lastChangeReasonRef.current = changeDetails.reason;
-      setValueUnwrapped(newValue);
-      return true;
-    },
-    (0, import_internal.subSlot)(slot, "setValue")
-  );
-  const handleInputChange = (0, import_useStableCallback.useStableCallback)(
-    (valueInput, index, event) => {
-      const newValue = (0, import_getSliderValue.getSliderValue)(valueInput, index, min, max, range, values);
-      if ((0, import_validateMinimumDistance.validateMinimumDistance)(newValue, step, minStepsBetweenValues)) {
-        const reason = getSliderChangeEventReason(event);
-        const applied = setValue(
-          newValue,
-          (0, import_createChangeEventDetails.createChangeEventDetails)(reason, event, void 0, { activeThumbIndex: index })
-        );
-        setTouched(true);
-        if (applied) {
-          onValueCommitted(newValue, (0, import_createChangeEventDetails.createGenericEventDetails)(reason, event));
-        }
-      }
-    },
-    (0, import_internal.subSlot)(slot, "handleInput")
-  );
-  (0, import_octane.useLayoutEffect)(
-    () => {
-      const activeEl = (0, import_owner.ownerDocument)(sliderRef.current).activeElement;
-      if (disabled && (0, import_contains.contains)(sliderRef.current, activeEl)) {
-        activeEl.blur();
-      }
-    },
-    [disabled],
-    (0, import_internal.subSlot)(slot, "e:disabledBlur")
-  );
-  if (disabled && active !== -1) {
-    setActive(-1);
-  }
-  const state = (0, import_octane.useMemo)(
-    () => ({
-      ...fieldState,
-      activeThumbIndex: active,
-      disabled,
-      dragging,
-      orientation,
-      max,
-      min,
-      minStepsBetweenValues,
-      step,
-      values
-    }),
-    [
-      fieldState,
-      active,
-      disabled,
-      dragging,
-      max,
-      min,
-      minStepsBetweenValues,
-      orientation,
-      step,
-      values
-    ],
-    (0, import_internal.subSlot)(slot, "state")
-  );
-  const contextValue = (0, import_octane.useMemo)(
-    () => ({
-      active,
-      controlRef,
-      disabled,
-      dragging,
-      validation,
-      formatOptionsRef,
-      handleInputChange,
-      indicatorPosition,
-      inset: thumbAlignment !== "center",
-      labelId: ariaLabelledby,
-      rootLabelId: defaultLabelId,
-      largeStep,
-      lastUsedThumbIndex,
-      lastChangeReasonRef,
-      form,
-      locale,
-      max,
-      min,
-      minStepsBetweenValues,
-      name,
-      onValueCommitted,
-      orientation,
-      pressedInputRef,
-      pressedThumbCenterOffsetRef,
-      pressedThumbIndexRef,
-      pressedValuesRef,
-      registerFieldControlRef,
-      renderBeforeHydration: thumbAlignment === "edge",
-      setActive,
-      setDragging,
-      setIndicatorPosition,
-      setLabelId,
-      setValue,
-      state,
-      step,
-      thumbCollisionBehavior,
-      thumbMap,
-      thumbRefs,
-      values
-    }),
-    [
-      active,
-      ariaLabelledby,
-      defaultLabelId,
-      disabled,
-      dragging,
-      validation,
-      formatOptionsRef,
-      handleInputChange,
-      indicatorPosition,
-      largeStep,
-      lastUsedThumbIndex,
-      form,
-      locale,
-      max,
-      min,
-      minStepsBetweenValues,
-      name,
-      onValueCommitted,
-      orientation,
-      registerFieldControlRef,
-      setActive,
-      setValue,
-      state,
-      step,
-      thumbCollisionBehavior,
-      thumbAlignment,
-      thumbMap,
-      values
-    ],
-    (0, import_internal.subSlot)(slot, "ctx")
-  );
-  const element = (0, import_useRenderElement.useRenderElement)(
-    "div",
-    { render, className, style },
-    {
-      state,
-      ref: [ref, sliderRef],
-      props: [
-        { "aria-labelledby": ariaLabelledby, id, role: "group" },
-        elementProps,
-        (props) => validation.getValidationProps(disabled, props)
-      ],
-      stateAttributesMapping: sliderStateAttributesMapping
-    },
-    (0, import_internal.subSlot)(slot, "re")
-  );
-  return (0, import_octane.createElement)(SliderRootContext.Provider, {
-    value: contextValue,
-    children: (0, import_octane.createElement)(import_CompositeList.CompositeList, {
-      elementsRef: thumbRefs,
-      onMapChange: setThumbMap,
-      children: element
-    })
-  });
-}
-function getControlOffset(styles, vertical) {
-  if (!styles) {
-    return { start: 0, end: 0 };
-  }
-  function parseSize(value) {
-    const parsed = value != null ? parseFloat(value) : 0;
-    return Number.isNaN(parsed) ? 0 : parsed;
-  }
-  const start = !vertical ? "InlineStart" : "Top";
-  const end = !vertical ? "InlineEnd" : "Bottom";
-  return {
-    start: parseSize(styles[`border${start}Width`]) + parseSize(styles[`padding${start}`]),
-    end: parseSize(styles[`border${end}Width`]) + parseSize(styles[`padding${end}`])
-  };
-}
-function getFingerCoords(event, touchIdRef) {
-  if (touchIdRef.current != null && event.changedTouches) {
-    for (let i = 0; i < event.changedTouches.length; i += 1) {
-      const touch = event.changedTouches[i];
-      if (touch.identifier === touchIdRef.current) {
-        return { x: touch.clientX, y: touch.clientY };
-      }
-    }
-    return null;
-  }
-  return { x: event.clientX, y: event.clientY };
-}
-function SliderControl(componentProps) {
-  const slot = (0, import_internal.S)("SliderControl");
-  const { render, className, style, ref, ...elementProps } = componentProps;
-  const {
-    disabled,
-    dragging,
-    inset,
-    lastChangeReasonRef,
-    max,
-    min,
-    minStepsBetweenValues,
-    onValueCommitted,
-    orientation,
-    pressedInputRef,
-    pressedThumbCenterOffsetRef,
-    pressedThumbIndexRef,
-    pressedValuesRef,
-    registerFieldControlRef,
-    renderBeforeHydration,
-    setActive,
-    setDragging,
-    setValue,
-    state,
-    step,
-    thumbCollisionBehavior,
-    thumbRefs,
-    values
-  } = useSliderRootContext();
-  const direction = (0, import_DirectionContext.useDirection)();
-  const range = values.length > 1;
-  const vertical = orientation === "vertical";
-  const controlRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "controlRef"));
-  const stylesRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "stylesRef"));
-  const setStylesRef = (0, import_useStableCallback.useStableCallback)(
-    (element) => {
-      if (element && stylesRef.current == null) {
-        stylesRef.current = (0, import_owner.ownerWindow)(element).getComputedStyle(element);
-      }
-    },
-    (0, import_internal.subSlot)(slot, "setStyles")
-  );
-  const touchIdRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "touchId"));
-  const moveCountRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "moveCount"));
-  const insetThumbOffsetRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "insetOffset"));
-  const currentInteractionValueRef = (0, import_octane.useRef)(
-    null,
-    (0, import_internal.subSlot)(slot, "currentVal")
-  );
-  const latestValuesRef = (0, import_useValueAsRef.useValueAsRef)(values, (0, import_internal.subSlot)(slot, "latestValues"));
-  function updatePressedThumb(nextIndex) {
-    if (pressedThumbIndexRef.current !== nextIndex) {
-      pressedThumbIndexRef.current = nextIndex;
-    }
-    const thumbElement = thumbRefs.current[nextIndex];
-    if (!thumbElement) {
-      pressedThumbCenterOffsetRef.current = null;
-      pressedInputRef.current = null;
-      return;
-    }
-    pressedInputRef.current = thumbElement.querySelector('input[type="range"]');
-  }
-  function resetPressedThumb() {
-    pressedThumbIndexRef.current = -1;
-    pressedThumbCenterOffsetRef.current = null;
-    pressedInputRef.current = null;
-  }
-  function isTargetDisabledThumb(target) {
-    if (!isElementNode(target)) {
-      return false;
-    }
-    return thumbRefs.current.some((thumbEl) => {
-      if (!isElementNode(thumbEl) || !(0, import_contains.contains)(thumbEl, target)) {
-        return false;
-      }
-      return thumbEl.querySelector('input[type="range"]')?.disabled === true;
-    });
-  }
-  function getFingerState(fingerCoords) {
-    const control = controlRef.current;
-    const thumbIndex = pressedThumbIndexRef.current;
-    if (!control || !range && (thumbIndex < 0 || thumbIndex >= values.length)) {
-      return null;
-    }
-    const { width, height, bottom, left, right } = control.getBoundingClientRect();
-    const controlOffset = getControlOffset(stylesRef.current, vertical);
-    const insetThumbOffset = insetThumbOffsetRef.current;
-    const controlSize = (vertical ? height : width) - controlOffset.start - controlOffset.end - insetThumbOffset * 2;
-    const thumbCenterOffset = pressedThumbCenterOffsetRef.current ?? 0;
-    const fingerX = fingerCoords.x - thumbCenterOffset;
-    const fingerY = fingerCoords.y - thumbCenterOffset;
-    const valueSize = vertical ? bottom - fingerY - controlOffset.end : (direction === "rtl" ? right - fingerX : fingerX - left) - controlOffset.start;
-    const valueRescaled = (0, import_clamp.clamp)((valueSize - insetThumbOffset) / controlSize, 0, 1);
-    let newValue = (max - min) * valueRescaled + min;
-    newValue = (0, import_roundValueToStep.roundValueToStep)(newValue, step, min);
-    newValue = (0, import_clamp.clamp)(newValue, min, max);
-    if (!range) {
-      return { value: newValue, thumbIndex, didSwap: false };
-    }
-    if (thumbIndex < 0) {
-      return null;
-    }
-    return (0, import_resolveThumbCollision.resolveThumbCollision)({
-      behavior: thumbCollisionBehavior,
-      values,
-      currentValues: latestValuesRef.current ?? values,
-      initialValues: pressedValuesRef.current,
-      pressedIndex: thumbIndex,
-      nextValue: newValue,
-      min,
-      max,
-      step,
-      minStepsBetweenValues
-    });
-  }
-  function startPressing(fingerCoords) {
-    pressedValuesRef.current = range ? values.slice() : null;
-    currentInteractionValueRef.current = null;
-    latestValuesRef.current = values;
-    const pressedThumbIndex = pressedThumbIndexRef.current;
-    let closestThumbIndex = pressedThumbIndex;
-    if (pressedThumbIndex > -1 && pressedThumbIndex < values.length) {
-      if (values[pressedThumbIndex] === max) {
-        let candidateIndex = pressedThumbIndex;
-        while (candidateIndex > 0 && values[candidateIndex - 1] === max) {
-          candidateIndex -= 1;
-        }
-        closestThumbIndex = candidateIndex;
-      }
-    } else {
-      const axis = !vertical ? "x" : "y";
-      let minDistance;
-      closestThumbIndex = -1;
-      for (let i = 0; i < thumbRefs.current.length; i += 1) {
-        const thumbEl = thumbRefs.current[i];
-        if (isElementNode(thumbEl) && !thumbEl.querySelector('input[type="range"]')?.disabled) {
-          const midpoint = (0, import_getMidpoint.getMidpoint)(thumbEl);
-          const distance = Math.abs(fingerCoords[axis] - midpoint[axis]);
-          if (minDistance === void 0 || distance <= minDistance) {
-            closestThumbIndex = i;
-            minDistance = distance;
-          }
-        }
-      }
-    }
-    if (closestThumbIndex > -1 && closestThumbIndex !== pressedThumbIndex) {
-      updatePressedThumb(closestThumbIndex);
-    }
-    if (inset) {
-      const thumbEl = thumbRefs.current[closestThumbIndex];
-      if (isElementNode(thumbEl)) {
-        const thumbRect = thumbEl.getBoundingClientRect();
-        const side = !vertical ? "width" : "height";
-        insetThumbOffsetRef.current = thumbRect[side] / 2;
-      }
-    }
-  }
-  function focusThumb(thumbIndex) {
-    const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
-    if (!input) {
-      return;
-    }
-    input.focus({ preventScroll: true, focusVisible: false });
-  }
-  function setValueFromPointer(finger, reason, nativeEvent) {
-    const applied = setValue(
-      finger.value,
-      (0, import_createChangeEventDetails.createChangeEventDetails)(reason, nativeEvent, void 0, {
-        activeThumbIndex: finger.thumbIndex
-      })
-    );
-    if (applied) {
-      currentInteractionValueRef.current = finger.value;
-      latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];
-      if (finger.didSwap) {
-        updatePressedThumb(finger.thumbIndex);
-      }
-    }
-    return applied;
-  }
-  const handleTouchMove = (0, import_useStableCallback.useStableCallback)(
-    (nativeEvent) => {
-      const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
-      if (fingerCoords == null) {
-        return;
-      }
-      moveCountRef.current += 1;
-      if (nativeEvent.type === "pointermove" && nativeEvent.buttons === 0) {
-        handleTouchEnd(nativeEvent);
-        return;
-      }
-      const finger = getFingerState(fingerCoords);
-      if (finger == null) {
-        return;
-      }
-      if ((0, import_validateMinimumDistance.validateMinimumDistance)(finger.value, step, minStepsBetweenValues)) {
-        if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
-          setDragging(true);
-        }
-        const applied = setValueFromPointer(finger, import_createChangeEventDetails.REASONS.drag, nativeEvent);
-        if (applied && finger.didSwap) {
-          focusThumb(finger.thumbIndex);
-        }
-      }
-    },
-    (0, import_internal.subSlot)(slot, "touchMove")
-  );
-  const handleTouchEnd = (0, import_useStableCallback.useStableCallback)(
-    (nativeEvent) => {
-      setActive(-1);
-      setDragging(false);
-      pressedInputRef.current = null;
-      pressedThumbCenterOffsetRef.current = null;
-      if (currentInteractionValueRef.current != null) {
-        const commitReason = lastChangeReasonRef.current;
-        onValueCommitted(
-          currentInteractionValueRef.current,
-          (0, import_createChangeEventDetails.createGenericEventDetails)(commitReason, nativeEvent)
-        );
-      }
-      if ("pointerType" in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) {
-        controlRef.current?.releasePointerCapture(nativeEvent.pointerId);
-      }
-      pressedThumbIndexRef.current = -1;
-      touchIdRef.current = null;
-      pressedValuesRef.current = null;
-      currentInteractionValueRef.current = null;
-      stopListening();
-    },
-    (0, import_internal.subSlot)(slot, "touchEnd")
-  );
-  const handleTouchStart = (0, import_useStableCallback.useStableCallback)(
-    (nativeEvent) => {
-      if (disabled) {
-        return;
-      }
-      if (isTargetDisabledThumb((0, import_list_utils.getTarget)(nativeEvent))) {
-        resetPressedThumb();
-        return;
-      }
-      const touch = nativeEvent.changedTouches[0];
-      if (touch != null) {
-        touchIdRef.current = touch.identifier;
-      }
-      const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
-      if (fingerCoords != null) {
-        startPressing(fingerCoords);
-        const finger = getFingerState(fingerCoords);
-        if (finger == null) {
-          return;
-        }
-        focusThumb(finger.thumbIndex);
-        const applied = setValueFromPointer(finger, import_createChangeEventDetails.REASONS.trackPress, nativeEvent);
-        if (applied && finger.didSwap) {
-          focusThumb(finger.thumbIndex);
-        }
-      }
-      moveCountRef.current = 0;
-      const doc = (0, import_owner.ownerDocument)(controlRef.current);
-      doc.addEventListener("touchmove", handleTouchMove, { passive: true });
-      doc.addEventListener("touchend", handleTouchEnd, { passive: true });
-    },
-    (0, import_internal.subSlot)(slot, "touchStart")
-  );
-  const stopListening = (0, import_useStableCallback.useStableCallback)(
-    () => {
-      const doc = (0, import_owner.ownerDocument)(controlRef.current);
-      doc.removeEventListener("pointermove", handleTouchMove);
-      doc.removeEventListener("pointerup", handleTouchEnd);
-      doc.removeEventListener("touchmove", handleTouchMove);
-      doc.removeEventListener("touchend", handleTouchEnd);
-      pressedValuesRef.current = null;
-      currentInteractionValueRef.current = null;
-    },
-    (0, import_internal.subSlot)(slot, "stop")
-  );
-  const focusFrame = (0, import_useAnimationFrame.useAnimationFrame)((0, import_internal.subSlot)(slot, "focusFrame"));
-  (0, import_octane.useEffect)(
-    () => {
-      const control = controlRef.current;
-      if (!control) {
-        return () => stopListening();
-      }
-      const unsubscribeTouchStart = (0, import_addEventListener.addEventListener)(control, "touchstart", handleTouchStart, {
-        passive: true
-      });
-      return () => {
-        unsubscribeTouchStart();
-        focusFrame.cancel();
-        stopListening();
-      };
-    },
-    [stopListening, handleTouchStart, focusFrame],
-    (0, import_internal.subSlot)(slot, "e:touchstart")
-  );
-  (0, import_octane.useEffect)(
-    () => {
-      if (disabled) {
-        stopListening();
-      }
-    },
-    [disabled, stopListening],
-    (0, import_internal.subSlot)(slot, "e:disabled")
-  );
-  return (0, import_useRenderElement.useRenderElement)(
-    "div",
-    { render, className, style },
-    {
-      state,
-      ref: [ref, registerFieldControlRef, controlRef, setStylesRef],
-      props: [
-        {
-          ["data-base-ui-slider-control"]: renderBeforeHydration ? "" : void 0,
-          onPointerDown(event) {
-            const control = controlRef.current;
-            const target = (0, import_list_utils.getTarget)(event);
-            if (!control || disabled || event.defaultPrevented || !isElementNode(target) || event.button !== 0) {
-              return;
-            }
-            if (isTargetDisabledThumb(target)) {
-              resetPressedThumb();
-              return;
-            }
-            const fingerCoords = getFingerCoords(event, touchIdRef);
-            if (fingerCoords != null) {
-              startPressing(fingerCoords);
-              const finger = getFingerState(fingerCoords);
-              if (finger == null) {
-                return;
-              }
-              const pressedOnFocusedThumb = (0, import_contains.contains)(
-                thumbRefs.current[finger.thumbIndex],
-                (0, import_owner.ownerDocument)(control).activeElement
-              );
-              if (pressedOnFocusedThumb) {
-                event.preventDefault();
-              } else {
-                focusFrame.request(() => {
-                  focusThumb(finger.thumbIndex);
-                });
-              }
-              setDragging(true);
-              const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;
-              if (!pressedOnAnyThumb) {
-                const applied = setValueFromPointer(finger, import_createChangeEventDetails.REASONS.trackPress, event);
-                if (applied && finger.didSwap) {
-                  focusThumb(finger.thumbIndex);
-                }
-              }
-            }
-            if (event.pointerId) {
-              control.setPointerCapture(event.pointerId);
-            }
-            moveCountRef.current = 0;
-            const doc = (0, import_owner.ownerDocument)(controlRef.current);
-            doc.addEventListener("pointermove", handleTouchMove, { passive: true });
-            doc.addEventListener("pointerup", handleTouchEnd, { once: true });
-          }
-        },
-        elementProps
-      ],
-      stateAttributesMapping: sliderStateAttributesMapping
-    },
-    (0, import_internal.subSlot)(slot, "re")
-  );
-}
-function SliderTrack(componentProps) {
-  const slot = (0, import_internal.S)("SliderTrack");
-  const { render, className, style, ref, ...elementProps } = componentProps;
-  const { state } = useSliderRootContext();
-  return (0, import_useRenderElement.useRenderElement)(
-    "div",
-    { render, className, style },
-    {
-      state,
-      ref,
-      props: [{ style: { position: "relative" } }, elementProps],
-      stateAttributesMapping: sliderStateAttributesMapping
-    },
-    (0, import_internal.subSlot)(slot, "re")
-  );
-}
-function getInsetStyles(vertical, range, start, end, renderBeforeHydration, hydrating) {
-  const visibility = start === void 0 || range && end === void 0 ? "hidden" : void 0;
-  const startEdge = vertical ? "bottom" : "insetInlineStart";
-  const mainSide = vertical ? "height" : "width";
-  const crossSide = vertical ? "width" : "height";
-  const styles = {
-    visibility: renderBeforeHydration && hydrating ? "hidden" : visibility,
-    position: vertical ? "absolute" : "relative",
-    [crossSide]: "inherit"
-  };
-  styles["--start-position"] = `${start ?? 0}%`;
-  if (!range) {
-    styles[startEdge] = 0;
-    styles[mainSide] = "var(--start-position)";
-    return styles;
-  }
-  styles["--relative-size"] = `${(end ?? 0) - (start ?? 0)}%`;
-  styles[startEdge] = "var(--start-position)";
-  styles[mainSide] = "var(--relative-size)";
-  return styles;
-}
-function getCenteredStyles(vertical, range, start, end) {
-  const startEdge = vertical ? "bottom" : "insetInlineStart";
-  const mainSide = vertical ? "height" : "width";
-  const crossSide = vertical ? "width" : "height";
-  const styles = {
-    position: vertical ? "absolute" : "relative",
-    [crossSide]: "inherit"
-  };
-  if (!range) {
-    styles[startEdge] = 0;
-    styles[mainSide] = `${start}%`;
-    return styles;
-  }
-  const size = end - start;
-  styles[startEdge] = `${start}%`;
-  styles[mainSide] = `${size}%`;
-  return styles;
-}
-function SliderIndicator(componentProps) {
-  const slot = (0, import_internal.S)("SliderIndicator");
-  const { render, className, style: styleProp, ref, ...elementProps } = componentProps;
-  const { indicatorPosition, inset, max, min, orientation, renderBeforeHydration, state, values } = useSliderRootContext();
-  const isHydrating = (0, import_useIsHydrating.useIsHydrating)((0, import_internal.subSlot)(slot, "hydrating"));
-  const vertical = orientation === "vertical";
-  const range = values.length > 1;
-  const style = inset ? getInsetStyles(
-    vertical,
-    range,
-    indicatorPosition[0],
-    indicatorPosition[1],
-    renderBeforeHydration,
-    isHydrating
-  ) : getCenteredStyles(
-    vertical,
-    range,
-    (0, import_valueToPercent.valueToPercent)(values[0], min, max),
-    (0, import_valueToPercent.valueToPercent)(values[values.length - 1], min, max)
-  );
-  return (0, import_useRenderElement.useRenderElement)(
-    "div",
-    { render, className, style: styleProp },
-    {
-      state,
-      ref,
-      props: [
-        { ["data-base-ui-slider-indicator"]: renderBeforeHydration ? "" : void 0, style },
-        elementProps
-      ],
-      stateAttributesMapping: sliderStateAttributesMapping
-    },
-    (0, import_internal.subSlot)(slot, "re")
-  );
-}
-function getDefaultAriaValueText(values, index, format, locale) {
-  if (index < 0) {
-    return void 0;
-  }
-  if (values.length === 2) {
-    if (index === 0) {
-      return `${(0, import_formatNumber.formatNumber)(values[index], locale, format)} start range`;
-    }
-    return `${(0, import_formatNumber.formatNumber)(values[index], locale, format)} end range`;
-  }
-  return format ? (0, import_formatNumber.formatNumber)(values[index], locale, format) : void 0;
-}
-function getNewValue(thumbValue, increment, direction, min, max) {
-  const value = direction === 1 ? thumbValue + increment : thumbValue - increment;
-  const roundedValue = Number(
-    value.toFixed(
-      Math.max(
-        (0, import_roundValueToStep.getDecimalPrecision)(thumbValue),
-        (0, import_roundValueToStep.getDecimalPrecision)(increment),
-        (0, import_roundValueToStep.getDecimalPrecision)(min)
-      )
-    )
-  );
-  return (0, import_clamp.clamp)(roundedValue, min, max);
-}
-function SliderThumb(componentProps) {
-  const slot = (0, import_internal.S)("SliderThumb");
-  const {
-    render,
-    children: childrenProp,
-    className,
-    "aria-describedby": ariaDescribedByProp,
-    "aria-label": ariaLabelProp,
-    "aria-labelledby": ariaLabelledByProp,
-    "aria-valuetext": ariaValueTextProp,
-    disabled: disabledProp = false,
-    getAriaLabel: getAriaLabelProp,
-    getAriaValueText: getAriaValueTextProp,
-    id: idProp,
-    index: indexProp,
-    inputRef: inputRefProp,
-    onBlur: onBlurProp,
-    onFocus: onFocusProp,
-    onKeyDown: onKeyDownProp,
-    tabIndex: tabIndexProp,
-    style,
-    ref,
-    ...elementProps
-  } = componentProps;
-  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
-  const {
-    active: activeIndex,
-    lastUsedThumbIndex,
-    controlRef,
-    disabled: contextDisabled,
-    validation,
-    formatOptionsRef,
-    handleInputChange,
-    inset,
-    labelId,
-    largeStep,
-    locale,
-    max,
-    min,
-    minStepsBetweenValues,
-    form,
-    name,
-    orientation,
-    pressedInputRef,
-    pressedThumbCenterOffsetRef,
-    pressedThumbIndexRef,
-    renderBeforeHydration,
-    setActive,
-    setIndicatorPosition,
-    state,
-    step,
-    values: sliderValues
-  } = useSliderRootContext();
-  const direction = (0, import_DirectionContext.useDirection)();
-  const disabled = disabledProp || contextDisabled;
-  const range = sliderValues.length > 1;
-  const vertical = orientation === "vertical";
-  const rtl = direction === "rtl";
-  const { setTouched, setFocused, validationMode } = (0, import_FieldRootContext.useFieldRootContext)();
-  const thumbRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "thumbRef"));
-  const inputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "inputRef"));
-  const restoringFocusVisibleRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "restoring"));
-  const defaultInputId = (0, import_useBaseUiId.useBaseUiId)(void 0, (0, import_internal.subSlot)(slot, "defInputId"));
-  const labelableId = (0, import_useLabelableId.useLabelableId)(void 0, (0, import_internal.subSlot)(slot, "labelableId"));
-  const inputId = range ? defaultInputId : labelableId;
-  const thumbMetadata = (0, import_octane.useMemo)(() => ({ inputId }), [inputId], (0, import_internal.subSlot)(slot, "meta"));
-  const { ref: listItemRef, index: compositeIndex } = (0, import_useCompositeListItem.useCompositeListItem)(
-    { metadata: thumbMetadata },
-    (0, import_internal.subSlot)(slot, "listItem")
-  );
-  const index = !range ? 0 : indexProp ?? compositeIndex;
-  const last = index === sliderValues.length - 1;
-  const thumbValue = sliderValues[index];
-  const thumbValuePercent = (0, import_valueToPercent.valueToPercent)(thumbValue, min, max);
-  const [positionPercent, setPositionPercent] = (0, import_octane.useState)(
-    void 0,
-    (0, import_internal.subSlot)(slot, "posPct")
-  );
-  const isHydrating = (0, import_useIsHydrating.useIsHydrating)((0, import_internal.subSlot)(slot, "hydrating"));
-  const safeLastUsedThumbIndex = lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
-  const getInsetPosition = (0, import_useStableCallback.useStableCallback)(
-    () => {
-      const control = controlRef.current;
-      const thumb = thumbRef.current;
-      if (!control || !thumb) {
-        return;
-      }
-      const thumbRect = thumb.getBoundingClientRect();
-      const controlRect = control.getBoundingClientRect();
-      const side = vertical ? "height" : "width";
-      const controlSize = controlRect[side] - thumbRect[side];
-      const thumbOffsetFromControlEdge = thumbRect[side] / 2 + controlSize * thumbValuePercent / 100;
-      const nextPositionPercent = thumbOffsetFromControlEdge / controlRect[side] * 100;
-      const nextInsetPosition = Number.isFinite(nextPositionPercent) ? nextPositionPercent : void 0;
-      setPositionPercent(nextInsetPosition);
-      if (index === 0) {
-        setIndicatorPosition((prevPosition) => [nextInsetPosition, prevPosition[1]]);
-      } else if (last) {
-        setIndicatorPosition((prevPosition) => [prevPosition[0], nextInsetPosition]);
-      }
-    },
-    (0, import_internal.subSlot)(slot, "insetPos")
-  );
-  (0, import_octane.useLayoutEffect)(
-    () => {
-      if (inset) {
-        queueMicrotask(getInsetPosition);
-      }
-    },
-    [getInsetPosition, inset],
-    (0, import_internal.subSlot)(slot, "e:inset1")
-  );
-  (0, import_octane.useLayoutEffect)(
-    () => {
-      if (inset) {
-        getInsetPosition();
-      }
-    },
-    [getInsetPosition, inset, thumbValuePercent],
-    (0, import_internal.subSlot)(slot, "e:inset2")
-  );
-  (0, import_octane.useLayoutEffect)(
-    () => {
-      if (!inset) {
-        return void 0;
-      }
-      const control = controlRef.current;
-      const thumb = thumbRef.current;
-      if (!control || !thumb) {
-        return void 0;
-      }
-      const ResizeObserverCtor = (0, import_owner.ownerWindow)(control).ResizeObserver;
-      if (typeof ResizeObserverCtor !== "function") {
-        return void 0;
-      }
-      const resizeObserver = new ResizeObserverCtor(getInsetPosition);
-      resizeObserver.observe(control);
-      resizeObserver.observe(thumb);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    },
-    [getInsetPosition, inset],
-    (0, import_internal.subSlot)(slot, "e:inset3")
-  );
-  const startEdge = vertical ? "bottom" : "insetInlineStart";
-  const crossOffsetProperty = vertical ? "left" : "top";
-  let zIndex;
-  if (range) {
-    if (activeIndex === index) {
-      zIndex = 2;
-    } else if (safeLastUsedThumbIndex === index) {
-      zIndex = 1;
-    }
-  } else if (activeIndex === index) {
-    zIndex = 1;
-  }
-  let thumbStyle;
-  if (inset) {
-    thumbStyle = {
-      ["--position"]: `${positionPercent ?? 0}%`,
-      visibility: renderBeforeHydration && isHydrating || positionPercent === void 0 ? "hidden" : void 0,
-      position: "absolute",
-      [startEdge]: "var(--position)",
-      [crossOffsetProperty]: "50%",
-      translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
-      zIndex
-    };
-  } else {
-    thumbStyle = !Number.isFinite(thumbValuePercent) ? import_visuallyHidden.visuallyHidden : {
-      position: "absolute",
-      [startEdge]: `${thumbValuePercent}%`,
-      [crossOffsetProperty]: "50%",
-      translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
-      zIndex
-    };
-  }
-  let cssWritingMode;
-  if (orientation === "vertical") {
-    cssWritingMode = rtl ? "vertical-rl" : "vertical-lr";
-  }
-  const ariaLabel = typeof getAriaLabelProp === "function" ? getAriaLabelProp(index) : ariaLabelProp;
-  const inputProps = (0, import_mergeProps.mergeProps)(
-    {
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledByProp ?? (ariaLabel == null ? labelId : void 0),
-      "aria-describedby": ariaDescribedByProp,
-      "aria-orientation": orientation,
-      "aria-valuenow": thumbValue,
-      "aria-valuetext": typeof getAriaValueTextProp === "function" ? getAriaValueTextProp(
-        (0, import_formatNumber.formatNumber)(thumbValue, locale, formatOptionsRef.current ?? void 0),
-        thumbValue,
-        index
-      ) : ariaValueTextProp ?? getDefaultAriaValueText(
-        sliderValues,
-        index,
-        formatOptionsRef.current ?? void 0,
-        locale
-      ),
-      disabled,
-      form,
-      id: inputId,
-      max,
-      min,
-      name,
-      onChange(event) {
-        handleInputChange(event.currentTarget.valueAsNumber, index, event);
-      },
-      onFocus(event) {
-        const isRestoringFocusVisible = restoringFocusVisibleRef.current;
-        restoringFocusVisibleRef.current = false;
-        setActive(index);
-        setFocused(true);
-        if (isRestoringFocusVisible) {
-          event.stopPropagation();
-        }
-      },
-      onBlur(event) {
-        if (restoringFocusVisibleRef.current) {
-          event.stopPropagation();
-          return;
-        }
-        if (!thumbRef.current) {
-          return;
-        }
-        setActive(-1);
-        setTouched(true);
-        setFocused(false);
-        if (validationMode === "onBlur") {
-          validation.commit((0, import_getSliderValue.getSliderValue)(thumbValue, index, min, max, range, sliderValues));
-        }
-      },
-      onKeyDown(event) {
-        if (event.defaultPrevented) {
-          return;
-        }
-        if (!ALL_KEYS.has(event.key)) {
-          return;
-        }
-        if (import_keys.COMPOSITE_KEYS.has(event.key)) {
-          event.stopPropagation();
-        }
-        let newValue = null;
-        const roundedValue = (0, import_roundValueToStep.roundValueToStep)(thumbValue, step, min);
-        switch (event.key) {
-          case import_keys.ARROW_UP:
-            newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, 1, min, max);
-            break;
-          case import_keys.ARROW_RIGHT:
-            newValue = getNewValue(
-              roundedValue,
-              event.shiftKey ? largeStep : step,
-              rtl ? -1 : 1,
-              min,
-              max
-            );
-            break;
-          case import_keys.ARROW_DOWN:
-            newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, -1, min, max);
-            break;
-          case import_keys.ARROW_LEFT:
-            newValue = getNewValue(
-              roundedValue,
-              event.shiftKey ? largeStep : step,
-              rtl ? 1 : -1,
-              min,
-              max
-            );
-            break;
-          case import_keys.PAGE_UP:
-            newValue = getNewValue(roundedValue, largeStep, 1, min, max);
-            break;
-          case import_keys.PAGE_DOWN:
-            newValue = getNewValue(roundedValue, largeStep, -1, min, max);
-            break;
-          case import_keys.END:
-            newValue = max;
-            if (range) {
-              newValue = Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
-            }
-            break;
-          case import_keys.HOME:
-            newValue = min;
-            if (range) {
-              newValue = Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
-            }
-            break;
-          default:
-            break;
-        }
-        if (newValue !== null) {
-          const input = event.currentTarget;
-          if (!(0, import_matchesFocusVisible.matchesFocusVisible)(input)) {
-            restoringFocusVisibleRef.current = true;
-            input.blur();
-            input.focus({ preventScroll: true, focusVisible: true });
-          }
-          handleInputChange(newValue, index, event);
-          event.preventDefault();
-        }
-      },
-      step,
-      style: {
-        ...import_visuallyHidden.visuallyHidden,
-        width: "100%",
-        height: "100%",
-        writingMode: cssWritingMode
-      },
-      tabIndex: tabIndexProp ?? void 0,
-      type: "range",
-      // octane: `value` is live CONTROLLED (React parity) — the runtime drives the
-      // `.value` property, mirrors it to the attribute, and reasserts after commits and
-      // discrete events. Base UI prevents native range interaction (keydown →
-      // preventDefault), so `thumbValue` stays the single source of truth, as on React.
-      value: thumbValue ?? ""
-    },
-    (props) => validation.getValidationProps(disabled, props),
-    { onKeyDown: onKeyDownProp }
-  );
-  const mergedInputRef = (0, import_composeRefs.useComposedRefs)(
-    inputRef,
-    validation.inputRef,
-    inputRefProp,
-    (0, import_internal.subSlot)(slot, "inputRefs")
-  );
-  const inputElement = (0, import_octane.createElement)("input", { key: "input", ...inputProps, ref: mergedInputRef });
-  return (0, import_useRenderElement.useRenderElement)(
-    "div",
-    { render, className, style },
-    {
-      state,
-      ref: [ref, listItemRef, thumbRef],
-      props: [
-        {
-          ["data-index"]: index,
-          // Keyed for the same reason as dialog and progress: octane reconciles an array
-          // child as a keyed list, and the consumer's children cannot be keyed in place.
-          children: [
-            (0, import_octane.createElement)(import_octane.Fragment, { key: "children", children: childrenProp }),
-            inputElement
-          ],
-          id,
-          onBlur: onBlurProp,
-          onFocus: onFocusProp,
-          onPointerDown(event) {
-            if (disabled) {
-              return;
-            }
-            pressedThumbIndexRef.current = index;
-            if (thumbRef.current != null) {
-              const axis = orientation === "horizontal" ? "x" : "y";
-              const midpoint = (0, import_getMidpoint.getMidpoint)(thumbRef.current);
-              const offset = (orientation === "horizontal" ? event.clientX : event.clientY) - midpoint[axis];
-              pressedThumbCenterOffsetRef.current = offset;
-            }
-            if (inputRef.current != null && pressedInputRef.current !== inputRef.current) {
-              pressedInputRef.current = inputRef.current;
-            }
-          },
-          style: thumbStyle
-        },
-        elementProps
-      ],
-      stateAttributesMapping: sliderStateAttributesMapping
-    },
-    (0, import_internal.subSlot)(slot, "re")
-  );
-}
-function SliderValue(componentProps) {
-  const slot = (0, import_internal.S)("SliderValue");
-  const {
-    "aria-live": ariaLive = "off",
-    render,
-    className,
-    children,
-    style,
-    ref,
-    ...elementProps
-  } = componentProps;
-  const { thumbMap, state, values, formatOptionsRef, locale } = useSliderRootContext();
-  let htmlFor = "";
-  for (const thumbMetadata of thumbMap.values()) {
-    if (thumbMetadata?.inputId) {
-      htmlFor += `${thumbMetadata.inputId} `;
-    }
-  }
-  const outputFor = htmlFor.trim() === "" ? void 0 : htmlFor.trim();
-  const formattedValues = (0, import_octane.useMemo)(
-    () => {
-      const arr = [];
-      for (let i = 0; i < values.length; i += 1) {
-        arr.push((0, import_formatNumber.formatNumber)(values[i], locale, formatOptionsRef.current ?? void 0));
-      }
-      return arr;
-    },
-    [formatOptionsRef, locale, values],
-    (0, import_internal.subSlot)(slot, "fmt")
-  );
-  const defaultDisplayValue = values.map((v, i) => formattedValues[i] || v).join(" \u2013 ");
-  return (0, import_useRenderElement.useRenderElement)(
-    "output",
-    { render, className, style },
-    {
-      state,
-      ref,
-      props: [
-        {
-          "aria-live": ariaLive,
-          children: typeof children === "function" ? children(formattedValues, values) : defaultDisplayValue,
-          htmlFor: outputFor
-        },
-        elementProps
-      ],
-      stateAttributesMapping: sliderStateAttributesMapping
-    },
-    (0, import_internal.subSlot)(slot, "re")
-  );
-}
-function SliderLabel(componentProps) {
-  const slot = (0, import_internal.S)("SliderLabel");
-  const { render, className, style, ref, ...elementProps } = componentProps;
-  delete elementProps.id;
-  const { state, setLabelId, controlRef, rootLabelId } = useSliderRootContext();
-  function focusControl(event, controlId) {
-    if (controlId) {
-      const controlElement = (0, import_owner.ownerDocument)(event.currentTarget).getElementById(controlId);
-      if (isHTMLElementNode(controlElement)) {
-        (0, import_useLabel.focusElementWithVisible)(controlElement);
-        return;
-      }
-    }
-    const fallbackInputs = controlRef.current?.querySelectorAll('input[type="range"]');
-    const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null;
-    if (isHTMLElementNode(fallbackInput)) {
-      (0, import_useLabel.focusElementWithVisible)(fallbackInput);
-    }
-  }
-  const labelProps = (0, import_useLabel.useLabel)(
-    { id: rootLabelId, setLabelId, focusControl },
-    (0, import_internal.subSlot)(slot, "label")
-  );
-  return (0, import_useRenderElement.useRenderElement)(
-    "div",
-    { render, className, style },
-    {
-      state,
-      ref,
-      props: [labelProps, elementProps],
-      stateAttributesMapping: sliderStateAttributesMapping
-    },
-    (0, import_internal.subSlot)(slot, "re")
-  );
-}
-const Slider = {
-  Root: SliderRoot,
-  Value: SliderValue,
-  Control: SliderControl,
-  Track: SliderTrack,
-  Indicator: SliderIndicator,
-  Thumb: SliderThumb,
-  Label: SliderLabel
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Slider
-});