@octanejs/base-ui 0.1.31 → 0.1.32

package/dist/cjs/slider.cjs

@@ -0,0 +1,1384 @@
+"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
+});