@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/inputs/SliderInput.js

@@ -1,204 +1,459 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import Text from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
-import { InputLabel, InputSize, InputVariant, getInputSurfaceColor, getInputTextSize } from "./Input.js";
+import { Placement } from "../theme/enums.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Tooltip from "../tooltip/Tooltip.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { isFilled } from "./internal/predicates.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { useOwnField } from "./internal/ownField.js";
 /* empty css                      */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { forwardRef, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/inputs/SliderInput.tsx
 /**
-* Rail thickness per `InputSize`. A slider has no box to fill, so it runs its
-* own scale rather than `getInputHeight`.
+* Sets a number, or a range of two numbers (`isRange`), by dragging a thumb along a rail, for
+* values people tune by feel: an opacity, a sampling rate, a threshold. It holds the value with
+* `value` / `defaultValue` / `onChange` (continuously while dragging) and reports the end of a
+* gesture with `onChangeEnd`. It snaps to `step` between `min` and `max`, can show ticks with
+* labels (`marks`), and can show the current value in a tooltip above the thumb
+* (`hasValueTooltip`). Each thumb is a `role="slider"` element.
+*
+* Labels and errors go through `Field`. SliderInput never validates. Replaces 1.x `SliderInput`
+* (`onInteractionEnd` → `onChangeEnd(value)`, `onInteractionStart` and `width` removed,
+* `InputSize` / `InputVariant` → `SliderInputSize` / `SliderInputVariant`).
 */
-function getSliderRailHeight(size) {
-	return match(size).returnType().with(InputSize.SMALL, () => 2).with(InputSize.MEDIUM, () => 3).with(InputSize.LARGE, () => 4).exhaustive();
-}
-function getSliderHandleSize(size) {
-	return match(size).returnType().with(InputSize.SMALL, () => 6).with(InputSize.MEDIUM, () => 8).with(InputSize.LARGE, () => 10).exhaustive();
+/** Canonical rungs; SliderInput supports all five. The track area is the rung height. */
+var SliderInputSize = /* @__PURE__ */ function(SliderInputSize) {
+	/** 20px track area, 2px rail, 10px thumb. */
+	SliderInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px track area, 2px rail, 12px thumb. */
+	SliderInputSize["SMALL"] = "SMALL";
+	/** 32px track area, 4px rail, 14px thumb. The default. */
+	SliderInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px track area, 4px rail, 16px thumb. */
+	SliderInputSize["LARGE"] = "LARGE";
+	/** 40px track area, 4px rail, 18px thumb. */
+	SliderInputSize["X_LARGE"] = "X_LARGE";
+	return SliderInputSize;
+}({});
+/** Fill of the unfilled rail (Constitution V-A surface set; 1.x InputVariant unchanged). */
+var SliderInputVariant = /* @__PURE__ */ function(SliderInputVariant) {
+	/** `background.base` fill. */
+	SliderInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	SliderInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	SliderInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	SliderInputVariant["TERTIARY"] = "TERTIARY";
+	return SliderInputVariant;
+}({});
+/** The width without `fillWidth` (the SelectInput width). */
+/** "Minimum" / "Maximum": the range thumbs' fixed English names (Decision 15). */
+var SLIDER_INPUT_RANGE_THUMB_NAMES = ["Minimum", "Maximum"];
+/** Decimal places of a number as written (`0.1` → 1, `1e-3` → 3). */
+function decimalsOf(number) {
+	if (!Number.isFinite(number)) return 0;
+	const [mantissa = "", exponent] = String(number).toLowerCase().split("e");
+	const fraction = mantissa.split(".")[1]?.length ?? 0;
+	return Math.max(0, fraction - (exponent === void 0 ? 0 : Number(exponent)));
 }
-var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
-var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-var SliderWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "SliderWrapper",
-	class: "sbeizks",
-	propsAsIs: false,
-	vars: {
-		"sbeizks-0": [_exp()],
-		"sbeizks-1": [_exp2()]
-	}
-}));
-var _exp3 = () => ({ $size }) => `${getSliderRailHeight($size)}px`;
-var _exp4 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
-var SliderTrack = withTheme(/*#__PURE__*/ styled("div")({
-	name: "SliderTrack",
-	class: "s42jcip",
-	propsAsIs: false,
-	vars: {
-		"s42jcip-0": [_exp3()],
-		"s42jcip-1": [_exp4()]
-	}
-}));
-var _exp5 = () => ({ theme }) => theme.color.icon.primary;
-var SliderFill = withTheme(/*#__PURE__*/ styled("div")({
-	name: "SliderFill",
-	class: "s1b59sw7",
-	propsAsIs: false,
-	vars: { "s1b59sw7-0": [_exp5()] }
-}));
-var _exp6 = () => ({ $percentage, $size }) => {
-	const handle = getSliderHandleSize($size);
-	return `calc(${handle / 2}px + ${$percentage}% - ${$percentage / 100 * handle}px)`;
-};
-var _exp8 = () => ({ $size }) => `${getSliderHandleSize($size)}px`;
-var _exp9 = () => ({ theme }) => theme.color.icon.primary;
-var _exp0 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "grab";
-var _exp1 = () => ({ $isDragging }) => $isDragging ? "none" : "left 0.1s ease-out, transform 0.1s ease-out";
-var _exp10 = () => ({ $isDisabled }) => $isDisabled ? "none" : "auto";
-var _exp11 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "grabbing";
-var _exp12 = () => ({ $isDisabled }) => $isDisabled ? "translate(-50%, -50%)" : "translate(-50%, -50%) scale(1.1)";
-var SliderHandle = withTheme(/*#__PURE__*/ styled("div")({
-	name: "SliderHandle",
-	class: "salrebx",
-	propsAsIs: false,
-	vars: {
-		"salrebx-0": [_exp6()],
-		"salrebx-1": [_exp8()],
-		"salrebx-2": [_exp9()],
-		"salrebx-3": [_exp0()],
-		"salrebx-4": [_exp1()],
-		"salrebx-5": [_exp10()],
-		"salrebx-6": [_exp11()],
-		"salrebx-7": [_exp12()]
-	}
-}));
-var HiddenInput = /*#__PURE__*/ styled("input")({
-	name: "HiddenInput",
-	class: "h1trli0w",
+/** A position along the track for a fraction custom property. */
+/** The root: the track, then the mark labels. */
+var Slider = /*#__PURE__*/ styled("div")({
+	name: "Slider",
+	class: "gx-SliderInput-Slider-sbeizks",
+	propsAsIs: false
+});
+/** The hit area and positioning box: the full rung height. */
+var Track = /*#__PURE__*/ styled("div")({
+	name: "Track",
+	class: "gx-SliderInput-Track-t42jcip",
+	propsAsIs: false
+});
+/** The unfilled rail, with a hairline on every variant. */
+var Rail = /*#__PURE__*/ styled("span")({
+	name: "Rail",
+	class: "gx-SliderInput-Rail-r1b59sw7",
+	propsAsIs: false
+});
+/** The filled span: from the start to the thumb, or between the two thumbs. */
+var Fill = /*#__PURE__*/ styled("span")({
+	name: "Fill",
+	class: "gx-SliderInput-Fill-falrebx",
+	propsAsIs: false
+});
+/** A 2px dot on the rail. */
+var Tick = /*#__PURE__*/ styled("span")({
+	name: "Tick",
+	class: "gx-SliderInput-Tick-t1trli0w",
+	propsAsIs: false
+});
+/** A thumb: the focusable `role="slider"` element. */
+var Thumb = /*#__PURE__*/ styled("span")({
+	name: "Thumb",
+	class: "gx-SliderInput-Thumb-t1vqwgc8",
+	propsAsIs: false
+});
+/** The labels row under the track; labels are not clipped. */
+var MarkLabels = /*#__PURE__*/ styled("div")({
+	name: "MarkLabels",
+	class: "gx-SliderInput-MarkLabels-m1i23o1h",
+	propsAsIs: false
+});
+/** One mark label, centered on its tick. */
+var MarkLabel = /*#__PURE__*/ styled("span")({
+	name: "MarkLabel",
+	class: "gx-SliderInput-MarkLabel-m14axfe1",
 	propsAsIs: false
 });
+/** Range: the fill runs between the two thumbs. */
+var FILL_RANGE_CSS = "gx-SliderInput-FILL_RANGE_CSS-fudygu0";
+/** The low thumb's position. */
+var THUMB_LOW_CSS = "gx-SliderInput-THUMB_LOW_CSS-tftu20f";
+/** The high (or only) thumb's position. */
+var THUMB_HIGH_CSS = "gx-SliderInput-THUMB_HIGH_CSS-ti8xoiz";
+/** A tick on the filled span stays visible on the fill. */
+var TICK_FILLED_CSS = "gx-SliderInput-TICK_FILLED_CSS-t1a78r92";
+/** The thumb being dragged. */
+var DRAGGING_CSS = "gx-SliderInput-DRAGGING_CSS-d12egp3k";
+/** Track, rail and thumb sizes per rung; every value is even, so both center on whole pixels. */
+var SLIDER_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-SliderInput-X_SMALL-xbdzcws",
+	["SMALL"]: "gx-SliderInput-SMALL-s8thtvu",
+	["MEDIUM"]: "gx-SliderInput-MEDIUM-m1ub36fq",
+	["LARGE"]: "gx-SliderInput-LARGE-l1ebia5y",
+	["X_LARGE"]: "gx-SliderInput-X_LARGE-xtm9yr7"
+};
+/** The unfilled rail per variant: the Input rest fills, with the hairline kept on every variant. */
+var SLIDER_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-SliderInput-BASE-b1eim1rd",
+	["PRIMARY"]: "gx-SliderInput-PRIMARY-pmdyvcs",
+	["SECONDARY"]: "gx-SliderInput-SECONDARY-sfme75x",
+	["TERTIARY"]: "gx-SliderInput-TERTIARY-twnayei"
+};
+/** `isGhost`: no rail fill, the hairline kept. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-SliderInput-GHOST_CSS-g1nk0y5e";
+/** Mark labels per rung. */
+var SLIDER_INPUT_SIZE_TO_MARK_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM,
+	["LARGE"]: TextSize.BODY_SM,
+	["X_LARGE"]: TextSize.BODY_SM
+};
+/** The `Field` a SliderInput renders for its own `label` / `error` uses the same rung. */
+var SLIDER_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
 /**
-* A drag-to-set numeric slider. Fully controlled.
-*
-* `onChange` fires on every pointer move. When each change is expensive, drive
-* a preview from it and commit on `onInteractionEnd`.
+* Hover on an editable slider: the rail hairline turns `border.hovered` (stronger than
+* `border.primary` in both themes, Constitution III.6), as an input frame does.
 */
-var SliderInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min = 0, max = 100, step = 1, isDisabled = false, width, fillWidth }) => {
-	const [isDragging, setIsDragging] = useState(false);
-	const sliderRef = useRef(null);
-	const isInteractingRef = useRef(false);
-	const beginInteraction = useCallback(() => {
-		if (isDisabled || isInteractingRef.current) return;
-		isInteractingRef.current = true;
-		onInteractionStart?.();
-	}, [isDisabled, onInteractionStart]);
-	const endInteraction = useCallback(() => {
-		if (!isInteractingRef.current) return;
-		isInteractingRef.current = false;
-		onInteractionEnd?.();
-	}, [onInteractionEnd]);
-	useEffect(() => () => {
-		endInteraction();
-	}, [endInteraction]);
-	const percentage = max === min ? 0 : Math.max(0, Math.min(100, (value - min) / (max - min) * 100));
-	const handleChange = useCallback((newValue) => {
-		if (isDisabled) return;
-		onChange(Math.round(Math.max(min, Math.min(max, newValue)) / step) * step);
-	}, [
-		isDisabled,
-		min,
-		max,
-		step,
+var HOVER_CSS = "gx-SliderInput-HOVER_CSS-h18dfoic";
+/** Error hairline on the rail, at rest and on hover. */
+var ERROR_CSS = "gx-SliderInput-ERROR_CSS-epqawlc";
+/**
+* Disabled: the rail keeps its resting hairline (`border.disabled` is not used on frames); fill and
+* thumbs turn `text.disabled`; nothing reacts to the pointer.
+*/
+var DISABLED_CSS = "gx-SliderInput-DISABLED_CSS-d15bc6fe";
+/** Read-only: focusable and announced, but nothing looks draggable. */
+var READ_ONLY_CSS = "gx-SliderInput-READ_ONLY_CSS-r24kxar";
+/** Stretch to the parent's width (slider, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-SliderInput-FILL_WIDTH_CSS-fz4wyc9";
+/** The track, thumbs and marks, wired to the nearest Field (the slider's own or the app's). */
+function SliderBody({ sliderProps, forwardedRef, isRoot }) {
+	const { isRange = false, value, defaultValue, onChange, onChangeEnd, min: minProp = 0, max: maxProp = 100, step: stepProp = 1, marks, formatValue = String, hasValueTooltip = false, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabelAttribute, className, style, ...rest } = sliderProps;
+	const min = Number.isFinite(minProp) ? minProp : 0;
+	const max = Number.isFinite(maxProp) ? Math.max(maxProp, min) : Math.max(100, min);
+	const step = Number.isFinite(stepProp) && stepProp > 0 ? stepProp : 1;
+	const precision = Math.max(decimalsOf(step), decimalsOf(min));
+	/** Snaps to `step` from `min`, clamps to `[min, max]`, and drops float noise. */
+	const snap = (raw) => {
+		const stepped = min + Math.round((raw - min) / step) * step;
+		return Number(Math.min(max, Math.max(min, stepped)).toFixed(precision));
+	};
+	const { field, controlId, describedBy, isInvalid, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute,
+		ariaLabelledBy,
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const [raw, setRaw] = useControlledState({
+		value,
+		defaultValue: defaultValue ?? (isRange ? [min, max] : min),
 		onChange
-	]);
-	const handleInputChange = useCallback((e) => {
-		handleChange(parseFloat(e.target.value));
-	}, [handleChange]);
-	const handleMouseDown = useCallback((e) => {
-		if (isDisabled) return;
-		beginInteraction();
-		setIsDragging(true);
-		const handleMouseMove = (moveEvent) => {
-			if (!sliderRef.current) return;
-			const rect = sliderRef.current.getBoundingClientRect();
-			const x = moveEvent.clientX - rect.left;
-			handleChange(min + Math.max(0, Math.min(100, x / rect.width * 100)) / 100 * (max - min));
-		};
-		const handleMouseUp = () => {
-			setIsDragging(false);
-			endInteraction();
-			document.removeEventListener("mousemove", handleMouseMove);
-			document.removeEventListener("mouseup", handleMouseUp);
-		};
-		document.addEventListener("mousemove", handleMouseMove);
-		document.addEventListener("mouseup", handleMouseUp);
-		handleMouseMove(e.nativeEvent);
-	}, [
-		beginInteraction,
-		endInteraction,
-		isDisabled,
-		min,
-		max,
-		handleChange
-	]);
-	return /* @__PURE__ */ jsxs(FlexWrapper, {
-		direction: FlexDirection.COLUMN,
-		gap: 12,
-		width,
-		fillWidth,
-		children: [label && /* @__PURE__ */ jsxs(FlexWrapper, {
-			alignItems: AlignItems.CENTER,
-			justifyContent: JustifyContent.SPACE_BETWEEN,
-			fillWidth: true,
-			children: [/* @__PURE__ */ jsx(InputLabel, {
-				label,
-				labelTooltip
-			}), /* @__PURE__ */ jsx(Text, {
-				size: getInputTextSize(size),
-				children: value
-			})]
-		}), /* @__PURE__ */ jsxs(SliderWrapper, {
-			ref: sliderRef,
-			$isDisabled: isDisabled,
+	});
+	const drawn = (typeof raw === "number" ? [raw] : raw).map((item) => snap(item)).sort((a, b) => a - b);
+	const values = isRange ? [drawn[0] ?? min, drawn[drawn.length - 1] ?? max] : [drawn[0] ?? min];
+	const valuesRef = useRef(values);
+	valuesRef.current = values;
+	const toPublic = (list) => isRange ? [list[0] ?? min, list[1] ?? max] : list[0] ?? min;
+	const isEditable = !isDisabled && !isReadOnly;
+	const trackRef = useRef(null);
+	const thumbRefs = useRef([null, null]);
+	const [dragging, setDragging] = useState(null);
+	const draggingRef = useRef(null);
+	const isTieRef = useRef(false);
+	const [tooltipRequests, setTooltipRequests] = useState([false, false]);
+	/** The range a thumb may move in: range thumbs never cross. */
+	const boundsOf = (index, list = valuesRef.current) => {
+		if (!isRange) return [min, max];
+		return index === 0 ? [min, list[1] ?? max] : [list[0] ?? min, max];
+	};
+	/** Sets one thumb (snapped and bounded) and reports it when it changed. Returns whether it did. */
+	const setThumb = (index, next) => {
+		const list = valuesRef.current;
+		const [low, high] = boundsOf(index, list);
+		const bounded = Math.min(high, Math.max(low, snap(next)));
+		if (bounded === list[index]) return false;
+		const updated = [...list];
+		updated[index] = bounded;
+		valuesRef.current = updated;
+		setRaw(toPublic(updated));
+		return true;
+	};
+	const endGesture = () => {
+		onChangeEnd?.(toPublic(valuesRef.current));
+	};
+	/** The value under a pointer x, from the track box (minus half the thumb at each end). */
+	const valueAt = (clientX) => {
+		const track = trackRef.current;
+		if (track === null) return min;
+		const box = track.getBoundingClientRect();
+		const thumb = thumbRefs.current[0]?.offsetWidth ?? 0;
+		const span = box.width - thumb;
+		const fraction = span <= 0 ? 0 : (clientX - box.left - thumb / 2) / span;
+		return min + Math.min(1, Math.max(0, fraction)) * (max - min);
+	};
+	const handlePointerDown = (event) => {
+		if (!isEditable || event.button !== 0) return;
+		const target = valueAt(event.clientX);
+		const list = valuesRef.current;
+		let index = 0;
+		if (isRange) {
+			const low = list[0] ?? min;
+			const high = list[1] ?? max;
+			const toLow = Math.abs(target - low);
+			const toHigh = Math.abs(target - high);
+			index = toLow < toHigh ? 0 : toHigh < toLow ? 1 : target < low ? 0 : 1;
+			isTieRef.current = low === high && snap(target) === low;
+		}
+		setThumb(index, target);
+		event.currentTarget.setPointerCapture(event.pointerId);
+		draggingRef.current = index;
+		setDragging(index);
+	};
+	/**
+	* A press on a thumb focuses it natively (a mouse focus, so no ring). A press elsewhere on the
+	* track would focus the body: it is prevented, and the thumb it moved is focused instead.
+	*/
+	const handleMouseDown = (event) => {
+		if (!isEditable || event.button !== 0) return;
+		const index = draggingRef.current;
+		if (index === null) return;
+		const thumb = thumbRefs.current[index];
+		if (thumb?.contains(event.target)) return;
+		event.preventDefault();
+		thumb?.focus({ preventScroll: true });
+	};
+	const handlePointerMove = (event) => {
+		let index = draggingRef.current;
+		if (index === null) return;
+		const next = valueAt(event.clientX);
+		if (isTieRef.current) {
+			const meeting = valuesRef.current[0] ?? min;
+			if (snap(next) === meeting) return;
+			isTieRef.current = false;
+			index = next < meeting ? 0 : 1;
+			draggingRef.current = index;
+			setDragging(index);
+			const thumb = thumbRefs.current[index];
+			if (thumb !== null && thumb !== void 0 && thumb !== thumb.ownerDocument.activeElement) thumb.focus({ preventScroll: true });
+		}
+		setThumb(index, next);
+	};
+	const handlePointerEnd = () => {
+		if (draggingRef.current === null) return;
+		draggingRef.current = null;
+		isTieRef.current = false;
+		setDragging(null);
+		endGesture();
+	};
+	const handleKeyDown = (index) => (event) => {
+		if (!isEditable) return;
+		const current = valuesRef.current[index] ?? min;
+		const [low, high] = boundsOf(index);
+		const page = Math.max(step, (max - min) / 10);
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				next = current + step;
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				next = current - step;
+				break;
+			case "PageUp":
+				next = current + page;
+				break;
+			case "PageDown":
+				next = current - page;
+				break;
+			case "Home":
+				next = low;
+				break;
+			case "End":
+				next = high;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		if (setThumb(index, next)) endGesture();
+	};
+	const setTooltipRequest = (index) => (isOpen) => {
+		setTooltipRequests((previous) => {
+			const next = [previous[0], previous[1]];
+			next[index] = isOpen;
+			return next;
+		});
+	};
+	const labelledBy = isFilled(ariaLabelledBy) ? ariaLabelledBy : field?.labelId;
+	const name = isFilled(ariaLabelAttribute) ? ariaLabelAttribute : ariaLabel;
+	useDevWarning(!hasName, "[@galaxy-io/dls] SliderInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	const span = max - min;
+	const fractionOf = (number) => span === 0 ? 0 : (number - min) / span;
+	const low = values[0] ?? min;
+	const high = values[values.length - 1] ?? max;
+	const inRangeMarks = (marks ?? []).filter((mark) => mark.value >= min && mark.value <= max);
+	const hasMarkLabels = inRangeMarks.some((mark) => isFilled(mark.label));
+	const isOnFill = (mark) => isRange ? mark >= low && mark <= high : mark <= high;
+	const renderThumb = (index) => {
+		const thumbValue = values[index] ?? min;
+		const [thumbMin, thumbMax] = boundsOf(index, values);
+		const thumb = /* @__PURE__ */ jsx(Thumb, {
+			ref: (element) => {
+				thumbRefs.current[index] = element;
+			},
+			role: "slider",
+			tabIndex: isDisabled ? -1 : 0,
+			...isRange ? { "aria-label": SLIDER_INPUT_RANGE_THUMB_NAMES[index] } : {
+				id: controlId,
+				...labelledBy === void 0 ? {} : { "aria-labelledby": labelledBy },
+				...isFilled(name) ? { "aria-label": name } : {}
+			},
+			"aria-valuemin": thumbMin,
+			"aria-valuemax": thumbMax,
+			"aria-valuenow": thumbValue,
+			"aria-valuetext": formatValue(thumbValue),
+			"aria-orientation": "horizontal",
+			"aria-describedby": describedBy,
+			"aria-invalid": isInvalid ? true : void 0,
+			"aria-readonly": isReadOnly ? true : void 0,
+			"aria-disabled": isDisabled ? true : void 0,
+			onKeyDown: handleKeyDown(index),
+			className: cx(isRange && index === 0 ? THUMB_LOW_CSS : THUMB_HIGH_CSS, dragging === index && DRAGGING_CSS)
+		}, index);
+		if (!hasValueTooltip) return thumb;
+		return /* @__PURE__ */ jsx(Tooltip, {
+			body: formatValue(thumbValue),
+			placement: Placement.TOP,
+			isOpen: dragging === index || tooltipRequests[index] === true,
+			onOpenChange: setTooltipRequest(index),
+			"aria-hidden": true,
+			children: thumb
+		}, index);
+	};
+	return /* @__PURE__ */ jsxs(Slider, {
+		ref: forwardedRef,
+		...isRange ? {
+			role: "group",
+			id: controlId,
+			...labelledBy === void 0 ? {} : { "aria-labelledby": labelledBy },
+			...isFilled(name) ? { "aria-label": name } : {}
+		} : {},
+		...rest,
+		className: cx(SLIDER_INPUT_SIZE_TO_CSS_MAP[size], isEditable && !isInvalid && HOVER_CSS, isInvalid && !isDisabled && ERROR_CSS, isDisabled && DISABLED_CSS, isReadOnly && !isDisabled && READ_ONLY_CSS, fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
+		style: {
+			"--gx-slider-low": fractionOf(low),
+			"--gx-slider-high": fractionOf(high),
+			...isRoot ? style : void 0
+		},
+		children: [/* @__PURE__ */ jsxs(Track, {
+			ref: trackRef,
+			onPointerDown: handlePointerDown,
 			onMouseDown: handleMouseDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: handlePointerEnd,
+			onPointerCancel: handlePointerEnd,
+			onLostPointerCapture: handlePointerEnd,
 			children: [
-				/* @__PURE__ */ jsx(SliderTrack, {
-					$variant: variant,
-					$size: size,
-					$isDisabled: isDisabled,
-					children: /* @__PURE__ */ jsx(SliderFill, {
-						$percentage: percentage,
-						$isDisabled: isDisabled,
-						style: { width: `${percentage}%` }
-					})
-				}),
-				/* @__PURE__ */ jsx(SliderHandle, {
-					$percentage: percentage,
-					$size: size,
-					$isDisabled: isDisabled,
-					$isDragging: isDragging
-				}),
-				/* @__PURE__ */ jsx(HiddenInput, {
-					type: "range",
-					min,
-					max,
-					step,
-					value,
-					onChange: handleInputChange,
-					onMouseDown: beginInteraction,
-					onMouseUp: endInteraction,
-					onTouchStart: beginInteraction,
-					onTouchEnd: endInteraction,
-					onKeyDown: beginInteraction,
-					onKeyUp: endInteraction,
-					onBlur: endInteraction,
-					disabled: isDisabled,
-					"aria-label": label || "Slider"
-				})
+				/* @__PURE__ */ jsx(Rail, { className: isGhost ? GHOST_CSS : SLIDER_INPUT_VARIANT_TO_CSS_MAP[variant] }),
+				/* @__PURE__ */ jsx(Fill, { className: cx(isRange && FILL_RANGE_CSS) }),
+				inRangeMarks.map((mark) => /* @__PURE__ */ jsx(Tick, {
+					"aria-hidden": true,
+					className: cx(isOnFill(mark.value) && TICK_FILLED_CSS),
+					style: { "--gx-slider-mark": fractionOf(mark.value) }
+				}, mark.value)),
+				values.map((_, index) => renderThumb(index))
 			]
+		}), hasMarkLabels && /* @__PURE__ */ jsx(MarkLabels, {
+			"aria-hidden": true,
+			children: inRangeMarks.map((mark) => isFilled(mark.label) ? /* @__PURE__ */ jsx(MarkLabel, {
+				style: { "--gx-slider-mark": fractionOf(mark.value) },
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: SLIDER_INPUT_SIZE_TO_MARK_TEXT_SIZE_MAP[size],
+					variant: isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+					isTabular: true,
+					children: mark.label
+				})
+			}, mark.value) : null)
 		})]
 	});
-};
+}
+/** A number, or a `[low, high]` range, set by dragging thumbs along a rail. */
+var SliderInput = forwardRef(function SliderInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "SliderInput",
+		label,
+		error,
+		isRequired,
+		size: SLIDER_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && FILL_WIDTH_CSS
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(SliderBody, {
+			sliderProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(SliderBody, {
+		sliderProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+SliderInput.displayName = "SliderInput";
 //#endregion
-export { SliderInput as default };
+export { SliderInputSize, SliderInputVariant, SliderInput as default };