@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

package/fesm2022/radix-ng-primitives-slider.mjs

@@ -1,851 +1,1107 @@
 import * as i0 from '@angular/core';
-import { inject, output, Directive, input, booleanAttribute, viewChild, signal, Input, Component, Injectable, numberAttribute, model, computed, ElementRef, PLATFORM_ID, NgModule } from '@angular/core';
-import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { inject, ElementRef, DestroyRef, Directive, computed, input, numberAttribute, booleanAttribute, model, output, signal, NgModule } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import * as i1 from '@radix-ng/primitives/core';
+import { createContext, clamp, injectControlValueAccessor, injectId, RdxControlValueAccessor } from '@radix-ng/primitives/core';
+export { clamp } from '@radix-ng/primitives/core';
 
-// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
-function linearScale(input, output) {
-    return (value) => {
-        if (input[0] === input[1] || output[0] === output[1])
-            return output[0];
-        const ratio = (output[1] - output[0]) / (input[1] - input[0]);
-        return output[0] + ratio * (value - input[0]);
-    };
-}
 /**
- * Verifies the minimum steps between all values is greater than or equal
- * to the expected minimum steps.
+ * The Slider context exposes the root directive instance to every child part.
+ * The root owns all state, value-change logic and thumb registration; parts read
+ * signals and call methods off it.
  *
- * @example
- * // returns false
- * hasMinStepsBetweenValues([1,2,3], 2);
- *
- * @example
- * // returns true
- * hasMinStepsBetweenValues([1,2,3], 1);
+ * @see https://base-ui.com/react/components/slider
  */
-function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
-    if (minStepsBetweenValues > 0) {
-        const stepsBetweenValues = getStepsBetweenValues(values);
-        const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
-        return actualMinStepsBetweenValues >= minStepsBetweenValues;
+const [injectSliderRootContext, provideSliderRootContext] = createContext('RdxSliderRootContext');
+
+/** Ascending comparator. */
+function asc(a, b) {
+    return a - b;
+}
+/** Maps a value within `[min, max]` to a 0–100 percentage. */
+function valueToPercent(value, min, max) {
+    return ((value - min) * 100) / (max - min);
+}
+/** Replaces the item at `index` then re-sorts the array ascending. */
+function replaceArrayItemAtIndex(array, index, newValue) {
+    const output = array.slice();
+    output[index] = newValue;
+    return output.sort(asc);
+}
+/** The center point of an element in client coordinates. */
+function getMidpoint(element) {
+    const rect = element.getBoundingClientRect();
+    return { x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2 };
+}
+/** Converts an array of values into clamped 0–100 percentages. */
+function valueArrayToPercentages(values, min, max) {
+    return values.map((value) => clamp(valueToPercent(value, min, max), 0, 100));
+}
+/** Number of decimal places in `num`, handling exponential notation for tiny values. */
+function getDecimalPrecision(num) {
+    if (num === 0) {
+        return 0;
     }
-    return true;
+    if (Math.abs(num) < 1) {
+        const parts = num.toExponential().split('e-');
+        const mantissaDecimalPart = parts[0].split('.')[1];
+        return (mantissaDecimalPart ? mantissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+    }
+    const decimalPart = num.toString().split('.')[1];
+    return decimalPart ? decimalPart.length : 0;
+}
+/** Snaps `value` to the nearest step, using `min` as the origin of the step grid. */
+function roundValueToStep(value, step, min) {
+    const nearest = Math.round((value - min) / step) * step + min;
+    return Number(nearest.toFixed(Math.max(getDecimalPrecision(step), getDecimalPrecision(min))));
 }
 /**
- * Given a `values` array and a `nextValue`, determine which value in
- * the array is closest to `nextValue` and return its index.
- *
- * @example
- * // returns 1
- * getClosestValueIndex([10, 30], 25);
+ * Resolves the value(s) for the keyboard / hidden-input path: clamps to the
+ * bounds, and for range sliders also clamps to neighbouring thumbs and re-sorts.
+ * Returns a `number` for single sliders and a sorted `number[]` for range sliders.
  */
-function getClosestValueIndex(values, nextValue) {
-    if (values.length === 1)
-        return 0;
-    const distances = values.map((value) => Math.abs(value - nextValue));
-    const closestDistance = Math.min(...distances);
-    return distances.indexOf(closestDistance);
+function getSliderValue(valueInput, index, min, max, range, values) {
+    let newValue = clamp(valueInput, min, max);
+    if (range) {
+        newValue = clamp(newValue, values[index - 1] ?? Number.NEGATIVE_INFINITY, values[index + 1] ?? Number.POSITIVE_INFINITY);
+        return replaceArrayItemAtIndex(values, index, newValue);
+    }
+    return newValue;
+}
+/** Returns `false` if any adjacent pair of values is closer than the minimum distance. */
+function validateMinimumDistance(values, step, minStepsBetweenValues) {
+    if (!Array.isArray(values)) {
+        return true;
+    }
+    const distances = values.reduce((acc, val, index, vals) => {
+        if (index === vals.length - 1) {
+            return acc;
+        }
+        acc.push(Math.abs(val - vals[index + 1]));
+        return acc;
+    }, []);
+    return Math.min(...distances) >= step * minStepsBetweenValues;
+}
+/** Keyboard step helper: increments/decrements `thumbValue` and clamps to bounds. */
+function getNewValue(thumbValue, increment, direction, min, max) {
+    const value = direction === 1 ? thumbValue + increment : thumbValue - increment;
+    const roundedValue = Number(value.toFixed(Math.max(getDecimalPrecision(thumbValue), getDecimalPrecision(increment), getDecimalPrecision(min))));
+    return clamp(roundedValue, min, max);
 }
 /**
- * Gets an array of steps between each value.
- *
- * @example
- * // returns [1, 9]
- * getStepsBetweenValues([10, 11, 20]);
+ * The "push" collision algorithm: moves the pressed thumb and pushes its
+ * neighbours only as far as needed, letting them spring back toward their
+ * initial positions as the pressed thumb retreats.
  */
-function getStepsBetweenValues(values) {
-    return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+function getPushedThumbValues(params) {
+    const { values, index, nextValue, min, max, step, minStepsBetweenValues, initialValues } = params;
+    if (values.length === 0) {
+        return [];
+    }
+    const nextValues = values.slice();
+    const minValueDifference = step * minStepsBetweenValues;
+    const lastIndex = nextValues.length - 1;
+    const baseInitialValues = initialValues ?? values;
+    const indexMin = min + index * minValueDifference;
+    const indexMax = max - (lastIndex - index) * minValueDifference;
+    nextValues[index] = clamp(nextValue, indexMin, indexMax);
+    // push thumbs to the right
+    for (let i = index + 1; i <= lastIndex; i += 1) {
+        const minAllowed = nextValues[i - 1] + minValueDifference;
+        const maxAllowed = max - (lastIndex - i) * minValueDifference;
+        const initialValue = baseInitialValues[i] ?? nextValues[i];
+        let candidate = Math.max(nextValues[i], minAllowed);
+        if (initialValue < candidate) {
+            candidate = Math.max(initialValue, minAllowed);
+        }
+        nextValues[i] = clamp(candidate, minAllowed, maxAllowed);
+    }
+    // push thumbs to the left
+    for (let i = index - 1; i >= 0; i -= 1) {
+        const maxAllowed = nextValues[i + 1] - minValueDifference;
+        const minAllowed = min + i * minValueDifference;
+        const initialValue = baseInitialValues[i] ?? nextValues[i];
+        let candidate = Math.min(nextValues[i], maxAllowed);
+        if (initialValue > candidate) {
+            candidate = Math.min(initialValue, maxAllowed);
+        }
+        nextValues[i] = clamp(candidate, minAllowed, maxAllowed);
+    }
+    for (let i = 0; i <= lastIndex; i += 1) {
+        nextValues[i] = Number(nextValues[i].toFixed(12));
+    }
+    return nextValues;
+}
+/** Dispatches the pressed thumb's new value through the configured collision behavior. */
+function resolveThumbCollision(params) {
+    const { behavior, values, currentValues, initialValues, pressedIndex, nextValue, min, max, step, minStepsBetweenValues } = params;
+    const activeValues = (currentValues ?? values).slice();
+    const baselineValues = initialValues ?? values;
+    const range = activeValues.length > 1;
+    const minValueDifference = step * minStepsBetweenValues;
+    if (!range) {
+        return { value: nextValue, thumbIndex: 0, didSwap: false };
+    }
+    if (behavior === 'push') {
+        const value = getPushedThumbValues({
+            values: activeValues,
+            index: pressedIndex,
+            nextValue,
+            min,
+            max,
+            step,
+            minStepsBetweenValues
+        });
+        return { value, thumbIndex: pressedIndex, didSwap: false };
+    }
+    if (behavior === 'swap') {
+        const pressedInitialValue = activeValues[pressedIndex];
+        const epsilon = 1e-7;
+        const candidateValues = activeValues.slice();
+        const previousNeighbor = candidateValues[pressedIndex - 1];
+        const nextNeighbor = candidateValues[pressedIndex + 1];
+        const lowerBound = previousNeighbor != null ? previousNeighbor + minValueDifference : min;
+        const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max;
+        const constrainedValue = clamp(nextValue, lowerBound, upperBound);
+        const pressedValueAfterClamp = Number(constrainedValue.toFixed(12));
+        candidateValues[pressedIndex] = pressedValueAfterClamp;
+        const movingForward = nextValue > pressedInitialValue;
+        const movingBackward = nextValue < pressedInitialValue;
+        const shouldSwapForward = movingForward && nextNeighbor != null && nextValue >= nextNeighbor - epsilon;
+        const shouldSwapBackward = movingBackward && previousNeighbor != null && nextValue <= previousNeighbor + epsilon;
+        if (!shouldSwapForward && !shouldSwapBackward) {
+            return { value: candidateValues, thumbIndex: pressedIndex, didSwap: false };
+        }
+        const targetIndex = shouldSwapForward ? pressedIndex + 1 : pressedIndex - 1;
+        const initialValuesForPush = candidateValues.map((_, idx) => {
+            if (idx === pressedIndex) {
+                return pressedValueAfterClamp;
+            }
+            const baseline = baselineValues[idx];
+            return baseline != null ? baseline : activeValues[idx];
+        });
+        const nextValueForTarget = shouldSwapForward
+            ? Math.max(nextValue, candidateValues[targetIndex])
+            : Math.min(nextValue, candidateValues[targetIndex]);
+        const adjustedValues = getPushedThumbValues({
+            values: candidateValues,
+            index: targetIndex,
+            nextValue: nextValueForTarget,
+            min,
+            max,
+            step,
+            minStepsBetweenValues,
+            initialValues: initialValuesForPush
+        });
+        const neighborIndex = shouldSwapForward ? targetIndex - 1 : targetIndex + 1;
+        if (neighborIndex >= 0 && neighborIndex < adjustedValues.length) {
+            const previousValue = adjustedValues[neighborIndex - 1];
+            const nextValueAfter = adjustedValues[neighborIndex + 1];
+            let neighborLowerBound = previousValue != null ? previousValue + minValueDifference : min;
+            neighborLowerBound = Math.max(neighborLowerBound, min + neighborIndex * minValueDifference);
+            let neighborUpperBound = nextValueAfter != null ? nextValueAfter - minValueDifference : max;
+            neighborUpperBound = Math.min(neighborUpperBound, max - (adjustedValues.length - 1 - neighborIndex) * minValueDifference);
+            const restoredValue = clamp(pressedValueAfterClamp, neighborLowerBound, neighborUpperBound);
+            adjustedValues[neighborIndex] = Number(restoredValue.toFixed(12));
+        }
+        return { value: adjustedValues, thumbIndex: targetIndex, didSwap: true };
+    }
+    // behavior === 'none' — clamp the pressed thumb between its neighbours; thumbs never cross.
+    const previousNeighbor = activeValues[pressedIndex - 1];
+    const nextNeighbor = activeValues[pressedIndex + 1];
+    const lowerBound = previousNeighbor != null ? previousNeighbor + minValueDifference : min;
+    const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max;
+    const constrained = Number(clamp(nextValue, lowerBound, upperBound).toFixed(12));
+    const value = activeValues.slice();
+    value[pressedIndex] = constrained;
+    return { value, thumbIndex: pressedIndex, didSwap: false };
 }
 /**
- * Offsets the thumb centre point while sliding to ensure it remains
- * within the bounds of the slider when reaching the edges
+ * Border + padding on the leading/trailing edge of the control along the active
+ * axis. Uses physical longhands (`left`/`right`/`top`/`bottom`) rather than
+ * logical ones (`inline-start`/…) because `getComputedStyle` resolves the
+ * physical properties in every browser, whereas logical longhands return an
+ * empty string in some engines.
  */
-function getThumbInBoundsOffset(width, left, direction) {
-    const halfWidth = width / 2;
-    const halfPercent = 50;
-    const offset = linearScale([0, halfPercent], [0, halfWidth]);
-    return (halfWidth - offset(left) * direction) * direction;
-}
-function convertValueToPercentage(value, min, max) {
-    const maxSteps = max - min;
-    const percentPerStep = 100 / maxSteps;
-    const percentage = percentPerStep * (value - min);
-    return clamp(percentage, 0, 100);
+function getControlOffset(styles, vertical, rtl) {
+    if (!styles) {
+        return { start: 0, end: 0 };
+    }
+    const parseSize = (v) => {
+        const p = parseFloat(v);
+        return Number.isNaN(p) ? 0 : p;
+    };
+    const sideOffset = (side) => parseSize(styles.getPropertyValue(`border-${side}-width`)) +
+        parseSize(styles.getPropertyValue(`padding-${side}`));
+    let startSide;
+    let endSide;
+    if (vertical) {
+        startSide = 'top';
+        endSide = 'bottom';
+    }
+    else if (rtl) {
+        startSide = 'right';
+        endSide = 'left';
+    }
+    else {
+        startSide = 'left';
+        endSide = 'right';
+    }
+    return { start: sideOffset(startSide), end: sideOffset(endSide) };
 }
-function getDecimalCount(value) {
-    return (String(value).split('.')[1] || '').length;
+const formatterCache = new Map();
+function getFormatter(locale, options) {
+    const key = JSON.stringify({ locale: locale ?? null, options: options ?? null });
+    let formatter = formatterCache.get(key);
+    if (!formatter) {
+        formatter = new Intl.NumberFormat(locale, options);
+        formatterCache.set(key, formatter);
+    }
+    return formatter;
 }
-function roundValue(value, decimalCount) {
-    const rounder = 10 ** decimalCount;
-    return Math.round(value * rounder) / rounder;
+/** Formats a number with a cached `Intl.NumberFormat` instance. */
+function formatNumber(value, locale, options) {
+    if (value == null) {
+        return '';
+    }
+    return getFormatter(locale, options).format(value);
 }
-function getNextSortedValues(prevValues = [], nextValue, atIndex) {
-    const nextValues = [...prevValues];
-    nextValues[atIndex] = nextValue;
-    return nextValues.sort((a, b) => a - b);
+/** Default `aria-valuetext` for a two-thumb range, or a formatted value when `format` is set. */
+function getDefaultAriaValueText(values, index, format, locale) {
+    if (index < 0) {
+        return undefined;
+    }
+    if (values.length === 2) {
+        return index === 0
+            ? `${formatNumber(values[index], locale, format)} start range`
+            : `${formatNumber(values[index], locale, format)} end range`;
+    }
+    return format ? formatNumber(values[index], locale, format) : undefined;
 }
-const PAGE_KEYS = ['PageUp', 'PageDown'];
 const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-const BACK_KEYS = {
-    'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],
-    'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],
-    'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],
-    'from-top': ['Home', 'PageUp', 'ArrowUp', 'ArrowLeft']
-};
-function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY) {
-    return Math.min(Math.max(value, min), max);
+const COMPOSITE_KEYS = new Set([...ARROW_KEYS, 'Home', 'End']);
+const ALL_KEYS = new Set([...COMPOSITE_KEYS, 'PageUp', 'PageDown']);
+function areValuesEqual(a, b) {
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((v, i) => v === b[i]);
+    }
+    return a === b;
 }
 
-class RdxSliderImplDirective {
+const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+/**
+ * The interactive area of the slider. Handles pointer presses and drags on the
+ * track, mapping pointer position to a value and moving the closest thumb.
+ *
+ * @see https://base-ui.com/react/components/slider
+ */
+class RdxSliderControl {
     constructor() {
-        this.rootContext = inject(RdxSliderRootComponent);
-        this.slideStart = output();
-        this.slideMove = output();
-        this.slideEnd = output();
-        this.homeKeyDown = output();
-        this.endKeyDown = output();
-        this.stepKeyDown = output();
+        this.root = injectSliderRootContext();
+        this.elementRef = inject(ElementRef);
+        this.document = inject(DOCUMENT);
+        this.styles = null;
+        this.moveCount = 0;
+        this.currentInteractionValue = null;
+        this.onMove = (event) => this.handleMove(event);
+        this.onUp = (event) => this.handleUp(event);
+        this.onCancel = (event) => this.handleUp(event);
+        this.root.controlRef.set(this.elementRef.nativeElement);
+        inject(DestroyRef).onDestroy(() => this.stopListening());
     }
-    onKeyDown(event) {
-        if (event.key === 'Home') {
-            this.homeKeyDown.emit(event);
-            // Prevent scrolling to page start
-            event.preventDefault();
+    onPointerDown(event) {
+        const control = this.elementRef.nativeElement;
+        if (this.root.isDisabled() || event.defaultPrevented || event.button !== 0) {
+            return;
         }
-        else if (event.key === 'End') {
-            this.endKeyDown.emit(event);
-            // Prevent scrolling to page end
-            event.preventDefault();
+        const target = event.target;
+        if (!target) {
+            return;
         }
-        else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
-            this.stepKeyDown.emit(event);
-            // Prevent scrolling for directional key presses
-            event.preventDefault();
+        // Suppress the nested range input's native click-to-set and drag so the
+        // control fully owns pointer interaction (otherwise releasing on a thumb
+        // fires a native change that snaps the value to the press point inside
+        // the thumb-sized input). Focus is restored manually via focusThumb.
+        event.preventDefault();
+        this.styles = this.document.defaultView?.getComputedStyle(control) ?? null;
+        this.startPressing({ x: event.clientX, y: event.clientY });
+        const finger = this.getFingerState({ x: event.clientX, y: event.clientY });
+        if (finger == null) {
+            return;
+        }
+        this.root.setDragging(true);
+        // Pressing directly on a thumb sets a center offset; only a rail press changes value on down.
+        if (this.root.pressedThumbCenterOffset == null) {
+            this.setValueFromPointer(finger, 'track-press');
         }
+        this.root.focusThumb(finger.thumbIndex);
+        control.setPointerCapture(event.pointerId);
+        this.moveCount = 0;
+        this.document.addEventListener('pointermove', this.onMove);
+        this.document.addEventListener('pointerup', this.onUp, { once: true });
+        this.document.addEventListener('pointercancel', this.onCancel, { once: true });
     }
-    onPointerDown(event) {
-        const target = event.target;
-        target.setPointerCapture(event.pointerId);
-        // Prevent browser focus behaviour because we focus a thumb manually when values change.
-        event.preventDefault();
-        // Touch devices have a delay before focusing so won't focus if touch immediately moves
-        // away from target (sliding). We want thumb to focus regardless.
-        if (this.rootContext.thumbElements.includes(target)) {
-            target.focus();
+    handleMove(event) {
+        this.moveCount += 1;
+        if (event.buttons === 0) {
+            this.handleUp(event);
+            return;
+        }
+        const finger = this.getFingerState({ x: event.clientX, y: event.clientY });
+        if (finger == null) {
+            return;
+        }
+        if (validateMinimumDistance(finger.value, this.root.step(), this.root.minStepsBetweenValues())) {
+            if (!this.root.dragging() && this.moveCount > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
+                this.root.setDragging(true);
+            }
+            const applied = this.setValueFromPointer(finger, 'drag');
+            if (applied && finger.didSwap) {
+                this.root.focusThumb(finger.thumbIndex);
+            }
+        }
+    }
+    handleUp(event) {
+        this.root.setActive(-1);
+        this.root.setDragging(false);
+        this.root.pressedThumbCenterOffset = null;
+        this.root.pressedInput = null;
+        if (this.currentInteractionValue != null) {
+            this.root.commitValue();
+        }
+        const control = this.elementRef.nativeElement;
+        if (control.hasPointerCapture?.(event.pointerId)) {
+            control.releasePointerCapture(event.pointerId);
+        }
+        this.root.resetPressedThumb();
+        this.root.pressedValues = null;
+        this.currentInteractionValue = null;
+        this.stopListening();
+    }
+    stopListening() {
+        this.document.removeEventListener('pointermove', this.onMove);
+        this.document.removeEventListener('pointerup', this.onUp);
+        this.document.removeEventListener('pointercancel', this.onCancel);
+    }
+    startPressing(finger) {
+        const values = this.root.values();
+        const range = this.root.range();
+        this.root.pressedValues = range ? values.slice() : null;
+        this.currentInteractionValue = null;
+        const pressedThumbIndex = this.root.pressedThumbIndex;
+        let closestThumbIndex = pressedThumbIndex;
+        if (pressedThumbIndex > -1 && pressedThumbIndex < values.length) {
+            // Pressed directly on a thumb sitting on max — walk left over stacked max thumbs.
+            if (values[pressedThumbIndex] === this.root.max()) {
+                let c = pressedThumbIndex;
+                while (c > 0 && values[c - 1] === this.root.max()) {
+                    c -= 1;
+                }
+                closestThumbIndex = c;
+            }
         }
         else {
-            this.slideStart.emit(event);
+            // Pressed on the rail — find the nearest enabled thumb by midpoint distance.
+            const axis = this.root.orientation() === 'horizontal' ? 'x' : 'y';
+            const thumbs = this.root.thumbList();
+            let minDistance;
+            closestThumbIndex = -1;
+            for (let i = 0; i < thumbs.length; i += 1) {
+                const thumb = thumbs[i];
+                if (thumb.disabled()) {
+                    continue;
+                }
+                const midpoint = getMidpoint(thumb.element);
+                const distance = Math.abs(finger[axis] - midpoint[axis]);
+                if (minDistance === undefined || distance <= minDistance) {
+                    closestThumbIndex = i;
+                    minDistance = distance;
+                }
+            }
+        }
+        if (closestThumbIndex > -1 && closestThumbIndex !== pressedThumbIndex) {
+            this.root.pressedThumbIndex = closestThumbIndex;
+            this.root.pressedInput = this.root.thumbList()[closestThumbIndex]?.inputElement ?? null;
         }
     }
-    onPointerMove(event) {
-        const target = event.target;
-        if (target.hasPointerCapture(event.pointerId)) {
-            this.slideMove.emit(event);
+    setValueFromPointer(finger, reason) {
+        const nextValues = Array.isArray(finger.value) ? finger.value : [finger.value];
+        const applied = this.root.setValue(nextValues, reason);
+        if (applied) {
+            this.currentInteractionValue = finger.value;
+            if (finger.didSwap) {
+                this.root.pressedThumbIndex = finger.thumbIndex;
+                this.root.pressedInput = this.root.thumbList()[finger.thumbIndex]?.inputElement ?? null;
+            }
         }
+        return applied;
     }
-    onPointerUp(event) {
-        const target = event.target;
-        if (target.hasPointerCapture(event.pointerId)) {
-            target.releasePointerCapture(event.pointerId);
-            this.slideEnd.emit(event);
+    /** Projects a pointer position onto the track and resolves it to a value (+ collision). */
+    getFingerState(finger) {
+        const control = this.root.controlRef();
+        const values = this.root.values();
+        const range = this.root.range();
+        const thumbIndex = this.root.pressedThumbIndex;
+        const vertical = this.root.orientation() === 'vertical';
+        const rtl = this.root.dir() === 'rtl';
+        const min = this.root.min();
+        const max = this.root.max();
+        const step = this.root.step();
+        if (!control || (!range && (thumbIndex < 0 || thumbIndex >= values.length))) {
+            return null;
+        }
+        const { width, height, bottom, left, right } = control.getBoundingClientRect();
+        const controlOffset = getControlOffset(this.styles, vertical, rtl);
+        const controlSize = (vertical ? height : width) - controlOffset.start - controlOffset.end;
+        // A collapsed/unmeasurable track would divide by zero and yield NaN values.
+        if (!(controlSize > 0)) {
+            return null;
+        }
+        const thumbCenterOffset = this.root.pressedThumbCenterOffset ?? 0;
+        const fingerX = finger.x - thumbCenterOffset;
+        const fingerY = finger.y - thumbCenterOffset;
+        const valueSize = vertical
+            ? bottom - fingerY - controlOffset.end
+            : (rtl ? right - fingerX : fingerX - left) - controlOffset.start;
+        const valueRescaled = clamp(valueSize / controlSize, 0, 1);
+        let newValue = (max - min) * valueRescaled + min;
+        newValue = roundValueToStep(newValue, step, min);
+        newValue = clamp(newValue, min, max);
+        if (!range) {
+            return { value: newValue, thumbIndex, didSwap: false };
         }
+        if (thumbIndex < 0) {
+            return null;
+        }
+        return resolveThumbCollision({
+            behavior: this.root.thumbCollisionBehavior(),
+            values,
+            currentValues: values,
+            initialValues: this.root.pressedValues,
+            pressedIndex: thumbIndex,
+            nextValue: newValue,
+            min,
+            max,
+            step,
+            minStepsBetweenValues: this.root.minStepsBetweenValues()
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxSliderImplDirective, isStandalone: true, selector: "[rdxSliderImpl]", outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", homeKeyDown: "homeKeyDown", endKeyDown: "endKeyDown", stepKeyDown: "stepKeyDown" }, host: { attributes: { "role": "slider", "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSliderControl, isStandalone: true, selector: "div[rdxSliderControl]", host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "attr.data-orientation": "root.orientation()", "attr.data-disabled": "root.isDisabled() ? \"\" : undefined", "attr.data-dragging": "root.dragging() ? \"\" : undefined" } }, exportAs: ["rdxSliderControl"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderImplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderControl, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSliderImpl]',
+                    selector: 'div[rdxSliderControl]',
+                    exportAs: 'rdxSliderControl',
                     host: {
-                        role: 'slider',
-                        tabindex: '0',
-                        '(keydown)': 'onKeyDown($event)',
-                        '(pointerdown)': 'onPointerDown($event)',
-                        '(pointermove)': 'onPointerMove($event)',
-                        '(pointerup)': 'onPointerUp($event)'
+                        '[attr.data-orientation]': 'root.orientation()',
+                        '[attr.data-disabled]': 'root.isDisabled() ? "" : undefined',
+                        '[attr.data-dragging]': 'root.dragging() ? "" : undefined',
+                        '(pointerdown)': 'onPointerDown($event)'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class RdxSliderHorizontalComponent {
+/**
+ * Visualises the portion of the track between the slider's minimum (or the first
+ * thumb in a range) and the active value.
+ *
+ * @see https://base-ui.com/react/components/slider
+ */
+class RdxSliderIndicator {
     constructor() {
-        this.rootContext = inject(RdxSliderRootComponent);
-        this.dir = 'ltr';
-        this.inverted = input(false, ...(ngDevMode ? [{ debugName: "inverted", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.min = 0;
-        this.max = 100;
-        this.className = '';
-        this.slideStart = output();
-        this.slideMove = output();
-        this.slideEnd = output();
-        this.stepKeyDown = output();
-        this.endKeyDown = output();
-        this.homeKeyDown = output();
-        this.sliderElement = viewChild('sliderElement', ...(ngDevMode ? [{ debugName: "sliderElement" }] : []));
-        this.rect = signal(undefined, ...(ngDevMode ? [{ debugName: "rect" }] : []));
-    }
-    onSlideStart(event) {
-        const value = this.getValueFromPointer(event.clientX);
-        this.slideStart.emit(value);
-    }
-    onSlideMove(event) {
-        const value = this.getValueFromPointer(event.clientX);
-        this.slideMove.emit(value);
-    }
-    onSlideEnd() {
-        this.rect.set(undefined);
-        this.slideEnd.emit();
-    }
-    onStepKeyDown(event) {
-        const slideDirection = this.rootContext.isSlidingFromLeft() ? 'from-left' : 'from-right';
-        const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
-        this.stepKeyDown.emit({ event, direction: isBackKey ? -1 : 1 });
-    }
-    getValueFromPointer(pointerPosition) {
-        this.rect.set(this.sliderElement()?.nativeElement.getBoundingClientRect());
-        const rect = this.rect();
-        if (!rect)
-            return 0;
-        const input = [0, rect.width];
-        const output = this.rootContext.isSlidingFromLeft()
-            ? [this.min, this.max]
-            : [this.max, this.min];
-        const value = linearScale(input, output);
-        this.rect.set(rect);
-        return value(pointerPosition - rect.left);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: RdxSliderHorizontalComponent, isStandalone: true, selector: "rdx-slider-horizontal", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: false, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", stepKeyDown: "stepKeyDown", endKeyDown: "endKeyDown", homeKeyDown: "homeKeyDown" }, viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
-        <span
-            #sliderElement
-            [class]="className"
-            [attr.data-orientation]="'horizontal'"
-            [style]="{ '--rdx-slider-thumb-transform': 'translateX(-50%)' }"
-            (slideStart)="onSlideStart($event)"
-            (slideMove)="onSlideMove($event)"
-            (slideEnd)="onSlideEnd()"
-            (stepKeyDown)="onStepKeyDown($event)"
-            (endKeyDown)="endKeyDown.emit($event)"
-            (homeKeyDown)="homeKeyDown.emit($event)"
-            rdxSliderImpl
-        >
-            <ng-content />
-        </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: RdxSliderImplDirective, selector: "[rdxSliderImpl]", outputs: ["slideStart", "slideMove", "slideEnd", "homeKeyDown", "endKeyDown", "stepKeyDown"] }] }); }
+        this.root = injectSliderRootContext();
+        this.indicatorStyle = computed(() => {
+            const vertical = this.root.orientation() === 'vertical';
+            const range = this.root.range();
+            const values = this.root.values();
+            const min = this.root.min();
+            const max = this.root.max();
+            const startEdge = vertical ? 'bottom' : 'inset-inline-start';
+            const mainSide = vertical ? 'height' : 'width';
+            const crossSide = vertical ? 'width' : 'height';
+            const start = valueToPercent(values[0], min, max);
+            const end = valueToPercent(values[values.length - 1], min, max);
+            const styles = {
+                position: vertical ? 'absolute' : 'relative',
+                [crossSide]: 'inherit'
+            };
+            if (!range) {
+                styles[startEdge] = 0;
+                styles[mainSide] = `${start}%`;
+                return styles;
+            }
+            styles[startEdge] = `${start}%`;
+            styles[mainSide] = `${end - start}%`;
+            return styles;
+        }, ...(ngDevMode ? [{ debugName: "indicatorStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSliderIndicator, isStandalone: true, selector: "div[rdxSliderIndicator]", host: { properties: { "style": "indicatorStyle()", "attr.data-orientation": "root.orientation()", "attr.data-disabled": "root.isDisabled() ? \"\" : undefined", "attr.data-dragging": "root.dragging() ? \"\" : undefined" } }, exportAs: ["rdxSliderIndicator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderHorizontalComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderIndicator, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'rdx-slider-horizontal',
-                    imports: [RdxSliderImplDirective],
-                    template: `
-        <span
-            #sliderElement
-            [class]="className"
-            [attr.data-orientation]="'horizontal'"
-            [style]="{ '--rdx-slider-thumb-transform': 'translateX(-50%)' }"
-            (slideStart)="onSlideStart($event)"
-            (slideMove)="onSlideMove($event)"
-            (slideEnd)="onSlideEnd()"
-            (stepKeyDown)="onStepKeyDown($event)"
-            (endKeyDown)="endKeyDown.emit($event)"
-            (homeKeyDown)="homeKeyDown.emit($event)"
-            rdxSliderImpl
-        >
-            <ng-content />
-        </span>
-    `
+                    selector: 'div[rdxSliderIndicator]',
+                    exportAs: 'rdxSliderIndicator',
+                    host: {
+                        '[style]': 'indicatorStyle()',
+                        '[attr.data-orientation]': 'root.orientation()',
+                        '[attr.data-disabled]': 'root.isDisabled() ? "" : undefined',
+                        '[attr.data-dragging]': 'root.dragging() ? "" : undefined'
+                    }
                 }]
-        }], propDecorators: { dir: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-class RdxSliderOrientationContextService {
-    constructor() {
-        this.contextSignal = signal({
-            startEdge: 'left',
-            endEdge: 'right',
-            direction: 1,
-            size: 'width'
-        }, ...(ngDevMode ? [{ debugName: "contextSignal" }] : []));
-    }
-    get context() {
-        return this.contextSignal();
-    }
-    updateContext(context) {
-        this.contextSignal.update((current) => ({
-            ...current,
-            ...context
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderOrientationContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderOrientationContextService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderOrientationContextService, decorators: [{
-            type: Injectable
         }] });
 
-class RdxSliderVerticalComponent {
-    constructor() {
-        this.rootContext = inject(RdxSliderRootComponent);
-        this.dir = 'ltr';
-        this.inverted = input(false, ...(ngDevMode ? [{ debugName: "inverted", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.min = 0;
-        this.max = 100;
-        this.className = '';
-        this.slideStart = output();
-        this.slideMove = output();
-        this.slideEnd = output();
-        this.stepKeyDown = output();
-        this.endKeyDown = output();
-        this.homeKeyDown = output();
-        this.sliderElement = viewChild('sliderElement', ...(ngDevMode ? [{ debugName: "sliderElement" }] : []));
-        this.rect = signal(undefined, ...(ngDevMode ? [{ debugName: "rect" }] : []));
-    }
-    onSlideStart(event) {
-        const value = this.getValueFromPointer(event.clientY);
-        this.slideStart.emit(value);
-    }
-    onSlideMove(event) {
-        const value = this.getValueFromPointer(event.clientY);
-        this.slideMove.emit(value);
-    }
-    onSlideEnd() {
-        this.rect.set(undefined);
-        this.slideEnd.emit();
-    }
-    onStepKeyDown(event) {
-        const slideDirection = this.rootContext.isSlidingFromBottom() ? 'from-bottom' : 'from-top';
-        const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
-        this.stepKeyDown.emit({ event, direction: isBackKey ? -1 : 1 });
-    }
-    getValueFromPointer(pointerPosition) {
-        this.rect.set(this.sliderElement()?.nativeElement.getBoundingClientRect());
-        const rect = this.rect();
-        if (!rect)
-            return 0;
-        const input = [0, rect.height];
-        const output = this.rootContext.isSlidingFromBottom()
-            ? [this.max, this.min]
-            : [this.min, this.max];
-        const value = linearScale(input, output);
-        this.rect.set(rect);
-        return value(pointerPosition - rect.top);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: RdxSliderVerticalComponent, isStandalone: true, selector: "rdx-slider-vertical", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: false, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", stepKeyDown: "stepKeyDown", endKeyDown: "endKeyDown", homeKeyDown: "homeKeyDown" }, viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
-        <span
-            #sliderElement
-            [class]="className"
-            [attr.data-orientation]="'vertical'"
-            [style]="{ '--rdx-slider-thumb-transform': 'translateY(-50%)' }"
-            (slideStart)="onSlideStart($event)"
-            (slideMove)="onSlideMove($event)"
-            (slideEnd)="onSlideEnd()"
-            (stepKeyDown)="onStepKeyDown($event)"
-            (endKeyDown)="endKeyDown.emit($event)"
-            (homeKeyDown)="homeKeyDown.emit($event)"
-            rdxSliderImpl
-        >
-            <ng-content />
-        </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: RdxSliderImplDirective, selector: "[rdxSliderImpl]", outputs: ["slideStart", "slideMove", "slideEnd", "homeKeyDown", "endKeyDown", "stepKeyDown"] }] }); }
+function sortByDomOrder(list) {
+    return list.slice().sort((a, b) => {
+        const position = a.element.compareDocumentPosition(b.element);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+        }
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+        return 0;
+    });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderVerticalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'rdx-slider-vertical',
-                    imports: [RdxSliderImplDirective],
-                    template: `
-        <span
-            #sliderElement
-            [class]="className"
-            [attr.data-orientation]="'vertical'"
-            [style]="{ '--rdx-slider-thumb-transform': 'translateY(-50%)' }"
-            (slideStart)="onSlideStart($event)"
-            (slideMove)="onSlideMove($event)"
-            (slideEnd)="onSlideEnd()"
-            (stepKeyDown)="onStepKeyDown($event)"
-            (endKeyDown)="endKeyDown.emit($event)"
-            (homeKeyDown)="homeKeyDown.emit($event)"
-            rdxSliderImpl
-        >
-            <ng-content />
-        </span>
-    `
-                }]
-        }], propDecorators: { dir: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
 /**
- * @group Components
+ * Groups all parts of the slider and owns its state, value-change logic and
+ * thumb registration. A single directive drives both orientations — there are no
+ * separate horizontal/vertical components.
+ *
+ * @see https://base-ui.com/react/components/slider
  */
-class RdxSliderRootComponent {
+class RdxSliderRoot {
     constructor() {
         /** @ignore */
-        this.orientationContext = inject(RdxSliderOrientationContextService);
+        this.cva = injectControlValueAccessor();
+        this.id = input(injectId('rdx-slider-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
-         * The minimum value for the range.
-         *
-         * @group Props
-         * @defaultValue 0
+         * The minimum value of the slider.
+         * @default 0
          */
-        this.min = input(0, ...(ngDevMode ? [{ debugName: "min", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * The maximum value for the range.
-         *
-         * @group Props
-         * @defaultValue 100
+         * The maximum value of the slider.
+         * @default 100
          */
-        this.max = input(100, ...(ngDevMode ? [{ debugName: "max", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * The stepping interval.
-         *
-         * @group Props
-         * @defaultValue 1
+         * The granularity with which the value can change through user interaction.
+         * @default 1
          */
-        this.step = input(1, ...(ngDevMode ? [{ debugName: "step", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * The minimum permitted steps between multiple thumbs.
-         *
-         * @group Props
-         * @defaultValue 0
+         * The granularity with which the value changes on Page Up / Page Down keys and Shift + Arrow keys.
+         * @default 10
          */
-        this.minStepsBetweenThumbs = input(0, ...(ngDevMode ? [{ debugName: "minStepsBetweenThumbs", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.largeStep = input(10, { ...(ngDevMode ? { debugName: "largeStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * The orientation of the slider.
-         *
-         * @group Props
-         * @defaultValue 'horizontal'
+         * The minimum number of steps that must separate two thumbs in a range slider.
+         * @default 0
          */
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.minStepsBetweenValues = input(0, { ...(ngDevMode ? { debugName: "minStepsBetweenValues" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * When true, prevents the user from interacting with the slider.
-         *
-         * @group Props
-         * @defaultValue false
-         */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /**
-         * Whether the slider is visually inverted.
-         *
-         * @group Props
-         * @defaultValue false
-         */
-        this.inverted = input(false, ...(ngDevMode ? [{ debugName: "inverted", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /**
-         * The reading direction of the combobox when applicable.
-         *
-         * @group Props
-         * @defaultValue 'ltr'
-         */
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
-        this.className = '';
-        /**
-         * Style class of the component.
-         *
-         * @group Props
+         * The orientation of the slider.
+         * @default 'horizontal'
          */
-        this.styleClass = input(...(ngDevMode ? [undefined, { debugName: "styleClass" }] : []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /**
-         * The controlled value of the slider.
-         *
-         * @group Props
+         * The reading direction. Mirrors the horizontal axis when set to `'rtl'`.
+         * @default 'ltr'
          */
-        this.modelValue = model([0], ...(ngDevMode ? [{ debugName: "modelValue" }] : []));
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
         /**
-         * Event handler called when the slider value changes.
-         *
-         * @group Emits
+         * How thumbs behave when they meet in a range slider.
+         * @default 'push'
          */
-        this.valueChange = output();
+        this.thumbCollisionBehavior = input('push', ...(ngDevMode ? [{ debugName: "thumbCollisionBehavior" }] : /* istanbul ignore next */ []));
+        /** Options forwarded to `Intl.NumberFormat` when displaying and announcing values. */
+        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
+        /** Locale used for value formatting. */
+        this.locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+        /** Name of the hidden inputs rendered by each thumb, for form submission. */
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Id of the form the slider belongs to. */
+        this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
         /**
-         * Event handler called when the value changes at the end of an interaction.
-         *
-         * Useful when you only need to capture a final value e.g. to update a backend service.
-         *
-         * @group Emits
+         * When `true`, the user cannot interact with the slider.
+         * @default false
          */
-        this.valueCommit = output();
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** The uncontrolled value of the slider when it is initially rendered. */
+        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        /** The controlled value of the slider. Use with `(onValueChange)` or two-way `[(value)]`. */
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        this.ariaLabelledBy = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+        /** Emitted when the value changes (during interaction). */
+        this.onValueChange = output();
+        /** Emitted when interaction ends, with the final value — useful for committing to a backend. */
+        this.onValueCommitted = output();
         /** @ignore */
-        this.valueIndexToChange = model(0, ...(ngDevMode ? [{ debugName: "valueIndexToChange" }] : []));
+        this.controlRef = signal(null, ...(ngDevMode ? [{ debugName: "controlRef" }] : /* istanbul ignore next */ []));
+        /** @ignore Active thumb index (-1 when none). */
+        this.active = signal(-1, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        /** @ignore Last thumb index that was focused/used, drives z-index stacking. */
+        this.lastUsedThumbIndex = signal(-1, ...(ngDevMode ? [{ debugName: "lastUsedThumbIndex" }] : /* istanbul ignore next */ []));
+        /** @ignore Whether a pointer drag is in progress. */
+        this.dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+        /** @ignore Pointer-drag scratch state (not reactive). */
+        this.pressedThumbIndex = -1;
         /** @ignore */
-        this.valuesBeforeSlideStart = model([], ...(ngDevMode ? [{ debugName: "valuesBeforeSlideStart" }] : []));
+        this.pressedThumbCenterOffset = null;
         /** @ignore */
-        this.isSlidingFromLeft = computed(() => (this.dir() === 'ltr' && !this.inverted()) || (this.dir() !== 'ltr' && this.inverted()), ...(ngDevMode ? [{ debugName: "isSlidingFromLeft" }] : []));
+        this.pressedInput = null;
+        /** @ignore Snapshot of values at drag start, the baseline for push/swap. */
+        this.pressedValues = null;
         /** @ignore */
-        this.isSlidingFromBottom = computed(() => !this.inverted(), ...(ngDevMode ? [{ debugName: "isSlidingFromBottom" }] : []));
+        this.lastChangeReason = 'none';
         /** @ignore */
-        this.thumbElements = [];
+        this.isDisabled = computed(() => !!this.cva.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** @ignore The current value source (controlled value, else default, else min). */
+        this.currentRaw = computed(() => this.cva.value() ?? this.defaultValue() ?? this.min(), ...(ngDevMode ? [{ debugName: "currentRaw" }] : /* istanbul ignore next */ []));
+        /** Whether the slider has multiple thumbs (the value is an array). */
+        this.range = computed(() => Array.isArray(this.cva.value() ?? this.defaultValue()), ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+        /** The clamped values rendered to the user, sorted ascending for range sliders. */
+        this.values = computed(() => {
+            const raw = this.currentRaw();
+            const min = this.min();
+            const max = this.max();
+            const arr = (Array.isArray(raw) ? raw.slice() : [raw]).map((v) => clamp(v, min, max));
+            return this.range() ? arr.sort(asc) : arr;
+        }, ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+        this.thumbs = signal([], ...(ngDevMode ? [{ debugName: "thumbs" }] : /* istanbul ignore next */ []));
+        /** Registered thumbs in DOM order. */
+        this.thumbList = this.thumbs.asReadonly();
     }
     /** @ignore */
-    ngOnInit() {
-        const isHorizontal = this.orientation() === 'horizontal';
-        if (isHorizontal) {
-            this.orientationContext.updateContext({
-                direction: this.isSlidingFromLeft() ? 1 : -1,
-                size: 'width',
-                startEdge: this.isSlidingFromLeft() ? 'left' : 'right',
-                endEdge: this.isSlidingFromLeft() ? 'right' : 'left'
-            });
-        }
-        else {
-            this.orientationContext.updateContext({
-                direction: this.isSlidingFromBottom() ? -1 : 1,
-                size: 'height',
-                startEdge: this.isSlidingFromBottom() ? 'bottom' : 'top',
-                endEdge: this.isSlidingFromBottom() ? 'top' : 'bottom'
-            });
-        }
+    registerThumb(thumb) {
+        this.thumbs.update((list) => sortByDomOrder([...list, thumb]));
     }
     /** @ignore */
-    onPointerDown() {
-        this.valuesBeforeSlideStart.set([...this.modelValue()]);
+    unregisterThumb(thumb) {
+        this.thumbs.update((list) => list.filter((t) => t !== thumb));
     }
     /** @ignore */
-    handleSlideStart(value) {
-        const closestIndex = getClosestValueIndex(this.modelValue(), value);
-        this.updateValues(value, closestIndex);
+    thumbIndexOf(thumb) {
+        return this.thumbList().indexOf(thumb);
     }
     /** @ignore */
-    handleSlideMove(value) {
-        this.updateValues(value, this.valueIndexToChange());
-    }
-    /** @ignore */
-    handleSlideEnd() {
-        const prevValue = this.valuesBeforeSlideStart()[this.valueIndexToChange()];
-        const nextValue = this.modelValue()[this.valueIndexToChange()];
-        const hasChanged = nextValue !== prevValue;
-        if (hasChanged) {
-            this.valueCommit.emit([...this.modelValue()]);
+    setActive(index) {
+        this.active.set(index);
+        if (index !== -1) {
+            this.lastUsedThumbIndex.set(index);
         }
     }
     /** @ignore */
-    handleStepKeyDown(event) {
-        const stepInDirection = this.step() * event.direction;
-        const atIndex = this.valueIndexToChange();
-        const currentValue = this.modelValue()[atIndex];
-        this.updateValues(currentValue + stepInDirection, atIndex, true);
+    focusThumb(index) {
+        this.thumbList()[index]?.inputElement?.focus({ preventScroll: true });
     }
     /** @ignore */
-    updateValues(value, atIndex, commit = false) {
-        const decimalCount = getDecimalCount(this.step());
-        const snapToStep = roundValue(Math.round((value - this.min()) / this.step()) * this.step() + this.min(), decimalCount);
-        const nextValue = clamp(snapToStep, this.min(), this.max());
-        const nextValues = getNextSortedValues(this.modelValue(), nextValue, atIndex);
-        if (hasMinStepsBetweenValues(nextValues, this.minStepsBetweenThumbs() * this.step())) {
-            this.valueIndexToChange.set(nextValues.indexOf(nextValue));
-            const hasChanged = String(nextValues) !== String(this.modelValue());
-            if (hasChanged) {
-                this.modelValue.set(nextValues);
-                this.valueChange.emit([...this.modelValue()]);
-                this.thumbElements[this.valueIndexToChange()]?.focus();
-                if (commit) {
-                    this.valueCommit.emit([...this.modelValue()]);
-                }
-            }
+    formatValue(value) {
+        return formatNumber(value, this.locale(), this.format());
+    }
+    /** @ignore Output value matching the original value shape (number vs array). */
+    outputValue() {
+        const raw = this.cva.value();
+        if (raw !== undefined) {
+            return raw;
         }
+        return this.range() ? this.values() : this.values()[0];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: RdxSliderRootComponent, isStandalone: true, selector: "rdx-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, valueIndexToChange: { classPropertyName: "valueIndexToChange", publicName: "valueIndexToChange", isSignal: true, isRequired: false, transformFunction: null }, valuesBeforeSlideStart: { classPropertyName: "valuesBeforeSlideStart", publicName: "valuesBeforeSlideStart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", valueChange: "valueChange", valueCommit: "valueCommit", valueIndexToChange: "valueIndexToChangeChange", valuesBeforeSlideStart: "valuesBeforeSlideStartChange" }, providers: [RdxSliderOrientationContextService], ngImport: i0, template: `
-        <ng-template #transclude><ng-content /></ng-template>
-
-        @if (orientation() === 'horizontal') {
-            <rdx-slider-horizontal
-                [className]="styleClass() || className"
-                [min]="min()"
-                [max]="max()"
-                [dir]="dir()"
-                [inverted]="inverted()"
-                [attr.aria-disabled]="disabled()"
-                [attr.data-disabled]="disabled() ? '' : undefined"
-                (pointerdown)="onPointerDown()"
-                (slideStart)="handleSlideStart($event)"
-                (slideMove)="handleSlideMove($event)"
-                (slideEnd)="handleSlideEnd()"
-                (homeKeyDown)="updateValues(min(), 0, true)"
-                (endKeyDown)="updateValues(max(), modelValue().length - 1, true)"
-                (stepKeyDown)="handleStepKeyDown($event)"
-            >
-                <ng-container *ngTemplateOutlet="transclude" />
-            </rdx-slider-horizontal>
+    /**
+     * @ignore
+     * Applies a new full set of values, preserving the single/range value shape.
+     * Returns `false` when the value did not change.
+     */
+    setValue(nextValues, reason) {
+        const next = this.range() ? nextValues : nextValues[0];
+        const current = this.outputValue();
+        const hasNaN = Array.isArray(next) ? next.some((v) => Number.isNaN(v)) : Number.isNaN(next);
+        if (hasNaN || areValuesEqual(next, current)) {
+            return false;
         }
-
-        @if (orientation() === 'vertical') {
-            <rdx-slider-vertical
-                [className]="styleClass() || className"
-                [min]="min()"
-                [max]="max()"
-                [dir]="dir()"
-                [inverted]="inverted()"
-                [attr.aria-disabled]="disabled()"
-                [attr.data-disabled]="disabled() ? '' : undefined"
-                (pointerdown)="onPointerDown()"
-                (slideStart)="handleSlideStart($event)"
-                (slideMove)="handleSlideMove($event)"
-                (slideEnd)="handleSlideEnd()"
-                (homeKeyDown)="updateValues(min(), 0, true)"
-                (endKeyDown)="updateValues(max(), modelValue().length - 1, true)"
-                (stepKeyDown)="handleStepKeyDown($event)"
-            >
-                <ng-container *ngTemplateOutlet="transclude" />
-            </rdx-slider-vertical>
-        }
-    `, isInline: true, dependencies: [{ kind: "component", type: RdxSliderHorizontalComponent, selector: "rdx-slider-horizontal", inputs: ["dir", "inverted", "min", "max", "className"], outputs: ["slideStart", "slideMove", "slideEnd", "stepKeyDown", "endKeyDown", "homeKeyDown"] }, { kind: "component", type: RdxSliderVerticalComponent, selector: "rdx-slider-vertical", inputs: ["dir", "inverted", "min", "max", "className"], outputs: ["slideStart", "slideMove", "slideEnd", "stepKeyDown", "endKeyDown", "homeKeyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+        this.lastChangeReason = reason;
+        this.value.set(next);
+        this.cva.setValue(next);
+        this.onValueChange.emit(next);
+        return true;
+    }
+    /** @ignore Keyboard / native input path: clamps to neighbours, commits immediately. */
+    handleInputChange(valueInput, index, reason = 'keyboard') {
+        if (this.isDisabled()) {
+            return;
+        }
+        const result = getSliderValue(valueInput, index, this.min(), this.max(), this.range(), this.values());
+        if (!validateMinimumDistance(result, this.step(), this.minStepsBetweenValues())) {
+            return;
+        }
+        const arr = Array.isArray(result) ? result : [result];
+        const applied = this.setValue(arr, reason);
+        this.cva.markAsTouched();
+        if (applied) {
+            this.onValueCommitted.emit(this.outputValue());
+        }
+    }
+    /** @ignore Emits the committed value at the end of a pointer drag. */
+    commitValue() {
+        this.onValueCommitted.emit(this.outputValue());
+    }
+    /** @ignore */
+    markAsTouched() {
+        this.cva.markAsTouched();
+    }
+    /** @ignore */
+    setDragging(dragging) {
+        this.dragging.set(dragging);
+    }
+    /** @ignore */
+    resetPressedThumb() {
+        this.pressedThumbIndex = -1;
+        this.pressedThumbCenterOffset = null;
+        this.pressedInput = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderRoot, isStandalone: true, selector: "div[rdxSliderRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenValues: { classPropertyName: "minStepsBetweenValues", publicName: "minStepsBetweenValues", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, thumbCollisionBehavior: { classPropertyName: "thumbCollisionBehavior", publicName: "thumbCollisionBehavior", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.dir": "dir()", "attr.data-orientation": "orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-dragging": "dragging() ? \"\" : undefined" } }, providers: [provideSliderRootContext(() => inject(RdxSliderRoot))], exportAs: ["rdxSliderRoot"], hostDirectives: [{ directive: i1.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderRootComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderRoot, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'rdx-slider',
-                    imports: [RdxSliderHorizontalComponent, RdxSliderVerticalComponent, NgTemplateOutlet],
-                    providers: [RdxSliderOrientationContextService],
-                    template: `
-        <ng-template #transclude><ng-content /></ng-template>
-
-        @if (orientation() === 'horizontal') {
-            <rdx-slider-horizontal
-                [className]="styleClass() || className"
-                [min]="min()"
-                [max]="max()"
-                [dir]="dir()"
-                [inverted]="inverted()"
-                [attr.aria-disabled]="disabled()"
-                [attr.data-disabled]="disabled() ? '' : undefined"
-                (pointerdown)="onPointerDown()"
-                (slideStart)="handleSlideStart($event)"
-                (slideMove)="handleSlideMove($event)"
-                (slideEnd)="handleSlideEnd()"
-                (homeKeyDown)="updateValues(min(), 0, true)"
-                (endKeyDown)="updateValues(max(), modelValue().length - 1, true)"
-                (stepKeyDown)="handleStepKeyDown($event)"
-            >
-                <ng-container *ngTemplateOutlet="transclude" />
-            </rdx-slider-horizontal>
-        }
-
-        @if (orientation() === 'vertical') {
-            <rdx-slider-vertical
-                [className]="styleClass() || className"
-                [min]="min()"
-                [max]="max()"
-                [dir]="dir()"
-                [inverted]="inverted()"
-                [attr.aria-disabled]="disabled()"
-                [attr.data-disabled]="disabled() ? '' : undefined"
-                (pointerdown)="onPointerDown()"
-                (slideStart)="handleSlideStart($event)"
-                (slideMove)="handleSlideMove($event)"
-                (slideEnd)="handleSlideEnd()"
-                (homeKeyDown)="updateValues(min(), 0, true)"
-                (endKeyDown)="updateValues(max(), modelValue().length - 1, true)"
-                (stepKeyDown)="handleStepKeyDown($event)"
-            >
-                <ng-container *ngTemplateOutlet="transclude" />
-            </rdx-slider-vertical>
-        }
-    `
+                    selector: 'div[rdxSliderRoot]',
+                    exportAs: 'rdxSliderRoot',
+                    providers: [provideSliderRootContext(() => inject(RdxSliderRoot))],
+                    hostDirectives: [
+                        {
+                            directive: RdxControlValueAccessor,
+                            inputs: ['value: value', 'disabled']
+                        }
+                    ],
+                    host: {
+                        role: 'group',
+                        '[id]': 'id()',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy()',
+                        '[attr.dir]': 'dir()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.data-dragging]': 'dragging() ? "" : undefined'
+                    }
                 }]
-        }], propDecorators: { className: [{
-                type: Input
-            }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeStep", required: false }] }], minStepsBetweenValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetweenValues", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], thumbCollisionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbCollisionBehavior", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onValueCommitted: [{ type: i0.Output, args: ["onValueCommitted"] }] } });
 
-class RdxSliderRangeComponent {
+/**
+ * A draggable handle. Render one per value; place an `input[rdxSliderThumbInput]`
+ * inside it for keyboard, accessibility and form submission.
+ *
+ * @see https://base-ui.com/react/components/slider
+ */
+class RdxSliderThumb {
     constructor() {
-        this.rootContext = inject(RdxSliderRootComponent);
-        this.percentages = computed(() => this.rootContext
-            .modelValue()
-            ?.map((value) => convertValueToPercentage(value, this.rootContext.min(), this.rootContext.max())), ...(ngDevMode ? [{ debugName: "percentages" }] : []));
-        this.offsetStart = computed(() => (this.rootContext.modelValue().length > 1 ? Math.min(...this.percentages()) : 0), ...(ngDevMode ? [{ debugName: "offsetStart" }] : []));
-        this.offsetEnd = computed(() => 100 - Math.max(...this.percentages()), ...(ngDevMode ? [{ debugName: "offsetEnd" }] : []));
-        this.rangeStyles = computed(() => {
-            const context = this.rootContext.orientationContext.context;
-            return {
-                [context.startEdge]: `${this.offsetStart()}%`,
-                [context.endEdge]: `${this.offsetEnd()}%`
+        this.root = injectSliderRootContext();
+        this.element = inject(ElementRef).nativeElement;
+        /** The nested range input, set by `[rdxSliderThumbInput]`. */
+        this.inputElement = null;
+        /** Explicit index for this thumb (required for SSR range sliders). */
+        this.indexInput = input(undefined, { ...(ngDevMode ? { debugName: "indexInput" } : /* istanbul ignore next */ {}), alias: 'index',
+            transform: (v) => (v == null ? undefined : numberAttribute(v)) });
+        /** Disables this individual thumb. */
+        this.thumbDisabled = input(false, { ...(ngDevMode ? { debugName: "thumbDisabled" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+        /** The position of this thumb among its siblings. */
+        this.index = computed(() => this.indexInput() ?? this.root.thumbIndexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        /** Whether this thumb is disabled (own state OR root disabled). */
+        this.disabled = computed(() => this.thumbDisabled() || this.root.isDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** The value represented by this thumb. */
+        this.value = computed(() => this.root.values()[this.index()], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.percent = computed(() => {
+            const value = this.value();
+            return value === undefined ? NaN : valueToPercent(value, this.root.min(), this.root.max());
+        }, ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+        this.thumbStyle = computed(() => {
+            const vertical = this.root.orientation() === 'vertical';
+            const rtl = this.root.dir() === 'rtl';
+            const startEdge = vertical ? 'bottom' : 'inset-inline-start';
+            const crossOffset = vertical ? 'left' : 'top';
+            const percent = this.percent();
+            if (!Number.isFinite(percent)) {
+                return { position: 'absolute', visibility: 'hidden' };
+            }
+            const index = this.index();
+            let zIndex;
+            if (this.root.range()) {
+                if (this.root.active() === index) {
+                    zIndex = 2;
+                }
+                else if (this.root.lastUsedThumbIndex() === index) {
+                    zIndex = 1;
+                }
+            }
+            else if (this.root.active() === index) {
+                zIndex = 1;
+            }
+            const style = {
+                position: 'absolute',
+                [startEdge]: `${percent}%`,
+                [crossOffset]: '50%',
+                translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`
             };
-        }, ...(ngDevMode ? [{ debugName: "rangeStyles" }] : []));
+            if (zIndex !== undefined) {
+                style['z-index'] = zIndex;
+            }
+            return style;
+        }, ...(ngDevMode ? [{ debugName: "thumbStyle" }] : /* istanbul ignore next */ []));
+        // Registration is DOM-order sorted on the root and reads no inputs, so the constructor
+        // (where the host element already exists) is the right place; cleanup goes via DestroyRef.
+        this.root.registerThumb(this);
+        inject(DestroyRef).onDestroy(() => this.root.unregisterThumb(this));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxSliderRangeComponent, isStandalone: true, selector: "rdx-slider-range", host: { properties: { "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()", "style": "rangeStyles()" } }, ngImport: i0, template: `
-        <ng-content />
-    `, isInline: true }); }
+    onPointerDown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        const index = this.index();
+        this.root.pressedThumbIndex = index;
+        const axis = this.root.orientation() === 'horizontal' ? 'x' : 'y';
+        const rect = this.element.getBoundingClientRect();
+        const midpoint = axis === 'x' ? (rect.left + rect.right) / 2 : (rect.top + rect.bottom) / 2;
+        const pointer = axis === 'x' ? event.clientX : event.clientY;
+        this.root.pressedThumbCenterOffset = pointer - midpoint;
+        if (this.inputElement) {
+            this.root.pressedInput = this.inputElement;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderThumb, isStandalone: true, selector: "div[rdxSliderThumb]", inputs: { indexInput: { classPropertyName: "indexInput", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, thumbDisabled: { classPropertyName: "thumbDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "style": "thumbStyle()", "attr.data-index": "index()", "attr.data-orientation": "root.orientation()", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-dragging": "root.dragging() ? \"\" : undefined" } }, exportAs: ["rdxSliderThumb"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderRangeComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumb, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'rdx-slider-range',
+                    selector: 'div[rdxSliderThumb]',
+                    exportAs: 'rdxSliderThumb',
                     host: {
-                        '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
-                        '[attr.data-orientation]': 'rootContext.orientation()',
-                        '[style]': 'rangeStyles()'
-                    },
-                    template: `
-        <ng-content />
-    `
+                        '[style]': 'thumbStyle()',
+                        '[attr.data-index]': 'index()',
+                        '[attr.data-orientation]': 'root.orientation()',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.data-dragging]': 'root.dragging() ? "" : undefined',
+                        '(pointerdown)': 'onPointerDown($event)'
+                    }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { indexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], thumbDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-class RdxSliderThumbImplDirective {
+/**
+ * The native `input[type=range]` nested inside a thumb. It is visually hidden but
+ * remains the focusable element that drives keyboard interaction, accessibility
+ * and form submission.
+ *
+ * @see https://base-ui.com/react/components/slider
+ */
+class RdxSliderThumbInput {
     constructor() {
-        this.rootContext = inject(RdxSliderRootComponent);
-        this.elementRef = inject(ElementRef);
-        this.platformId = inject(PLATFORM_ID);
-        this.isMounted = signal(false, ...(ngDevMode ? [{ debugName: "isMounted" }] : []));
-        this.thumbIndex = computed(() => {
-            const thumbElement = this.elementRef.nativeElement;
-            const index = this.rootContext.thumbElements.indexOf(thumbElement);
-            return index >= 0 ? index : null;
-        }, ...(ngDevMode ? [{ debugName: "thumbIndex" }] : []));
-        this.value = computed(() => {
-            const index = this.thumbIndex();
-            if (index === null)
-                return undefined;
-            return this.rootContext.modelValue()?.[index];
-        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.percent = computed(() => {
-            const val = this.value();
-            if (val === undefined)
-                return 0;
-            return convertValueToPercentage(val, this.rootContext.min(), this.rootContext.max());
-        }, ...(ngDevMode ? [{ debugName: "percent" }] : []));
-        this.transform = computed(() => {
-            const percent = this.percent();
-            const offset = this.thumbInBoundsOffset();
-            return `calc(${percent}% + ${offset}px)`;
-        }, ...(ngDevMode ? [{ debugName: "transform" }] : []));
-        this.orientationSize = signal(0, ...(ngDevMode ? [{ debugName: "orientationSize" }] : []));
-        this.thumbInBoundsOffset = computed(() => {
-            const context = this.rootContext.orientationContext.context;
-            const size = this.orientationSize();
-            const percent = this.percent();
-            const direction = context.direction;
-            return size ? getThumbInBoundsOffset(size, percent, direction) : 0;
-        }, ...(ngDevMode ? [{ debugName: "thumbInBoundsOffset" }] : []));
-        this.combinedStyles = computed(() => {
-            const context = this.rootContext.orientationContext.context;
-            const startEdge = context.startEdge;
-            const percent = this.percent();
-            const offset = this.thumbInBoundsOffset();
-            return {
-                position: 'absolute',
-                transform: 'var(--rdx-slider-thumb-transform)',
-                display: (this.isMounted() && this.value()) === false ? 'none' : undefined,
-                [startEdge]: `calc(${percent}% + ${offset}px)`
-            };
-        }, ...(ngDevMode ? [{ debugName: "combinedStyles" }] : []));
+        this.root = injectSliderRootContext();
+        this.thumb = inject(RdxSliderThumb);
+        this.element = inject(ElementRef).nativeElement;
+        this.ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        this.ariaValueTextInput = input(undefined, { ...(ngDevMode ? { debugName: "ariaValueTextInput" } : /* istanbul ignore next */ {}), alias: 'aria-valuetext' });
+        this.writingMode = computed(() => this.root.orientation() === 'vertical' ? (this.root.dir() === 'rtl' ? 'vertical-rl' : 'vertical-lr') : undefined, ...(ngDevMode ? [{ debugName: "writingMode" }] : /* istanbul ignore next */ []));
+        this.ariaLabelledBy = computed(() => this.ariaLabel() == null ? this.root.ariaLabelledBy() : undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+        this.valueText = computed(() => this.ariaValueTextInput() ??
+            getDefaultAriaValueText(this.root.values(), this.thumb.index(), this.root.format(), this.root.locale()), ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+        // Host element exists in the constructor and the registration has no input dependency.
+        this.thumb.inputElement = this.element;
+        inject(DestroyRef).onDestroy(() => {
+            if (this.thumb.inputElement === this.element) {
+                this.thumb.inputElement = null;
+            }
+        });
+    }
+    onChange(event) {
+        const value = event.target.valueAsNumber;
+        if (!Number.isNaN(value)) {
+            this.root.handleInputChange(value, this.thumb.index(), 'input');
+        }
     }
     onFocus() {
-        if (this.thumbIndex() !== null) {
-            this.rootContext.valueIndexToChange.set(this.thumbIndex());
-        }
-    }
-    ngOnInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            const thumbElement = this.elementRef.nativeElement;
-            this.rootContext.thumbElements.push(thumbElement);
-            this.resizeObserver = new ResizeObserver(() => {
-                const rect = thumbElement.getBoundingClientRect();
-                const context = this.rootContext.orientationContext.context;
-                const size = context.size === 'width' ? rect.width : rect.height;
-                this.orientationSize.set(size);
-            });
-            this.resizeObserver.observe(thumbElement);
-            this.isMounted.set(true);
-        }
-    }
-    ngOnDestroy() {
-        const thumbElement = this.elementRef.nativeElement;
-        const index = this.rootContext.thumbElements.indexOf(thumbElement);
-        if (index >= 0)
-            this.rootContext.thumbElements.splice(index, 1);
-        if (this.resizeObserver) {
-            this.resizeObserver.unobserve(thumbElement);
-        }
-        this.isMounted.set(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderThumbImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxSliderThumbImplDirective, isStandalone: true, selector: "[rdxSliderThumbImpl]", host: { attributes: { "role": "slider" }, listeners: { "focus": "onFocus()" }, properties: { "tabindex": "rootContext.disabled() ? undefined : 0", "attr.aria-valuenow": "rootContext.modelValue()", "attr.aria-valuemin": "rootContext.min()", "attr.aria-valuemax": "rootContext.max()", "attr.aria-orientation": "rootContext.orientation()", "attr.data-orientation": "rootContext.orientation()", "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "style": "combinedStyles()" } }, ngImport: i0 }); }
+        this.root.setActive(this.thumb.index());
+    }
+    onBlur() {
+        this.root.setActive(-1);
+        this.root.markAsTouched();
+    }
+    onKeyDown(event) {
+        if (event.defaultPrevented || !ALL_KEYS.has(event.key)) {
+            return;
+        }
+        if (COMPOSITE_KEYS.has(event.key)) {
+            event.stopPropagation();
+        }
+        const min = this.root.min();
+        const max = this.root.max();
+        const step = this.root.step();
+        const largeStep = this.root.largeStep();
+        const rtl = this.root.dir() === 'rtl';
+        const range = this.root.range();
+        const values = this.root.values();
+        const index = this.thumb.index();
+        const thumbValue = values[index];
+        const rounded = roundValueToStep(thumbValue, step, min);
+        let newValue = null;
+        switch (event.key) {
+            case 'ArrowUp':
+                newValue = getNewValue(rounded, event.shiftKey ? largeStep : step, 1, min, max);
+                break;
+            case 'ArrowRight':
+                newValue = getNewValue(rounded, event.shiftKey ? largeStep : step, rtl ? -1 : 1, min, max);
+                break;
+            case 'ArrowDown':
+                newValue = getNewValue(rounded, event.shiftKey ? largeStep : step, -1, min, max);
+                break;
+            case 'ArrowLeft':
+                newValue = getNewValue(rounded, event.shiftKey ? largeStep : step, rtl ? 1 : -1, min, max);
+                break;
+            case 'PageUp':
+                newValue = getNewValue(rounded, largeStep, 1, min, max);
+                break;
+            case 'PageDown':
+                newValue = getNewValue(rounded, largeStep, -1, min, max);
+                break;
+            case 'End':
+                newValue =
+                    range && Number.isFinite(values[index + 1])
+                        ? values[index + 1] - step * this.root.minStepsBetweenValues()
+                        : max;
+                break;
+            case 'Home':
+                newValue =
+                    range && Number.isFinite(values[index - 1])
+                        ? values[index - 1] + step * this.root.minStepsBetweenValues()
+                        : min;
+                break;
+            default:
+                break;
+        }
+        if (newValue !== null) {
+            this.root.handleInputChange(newValue, index, 'keyboard');
+            event.preventDefault();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumbInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderThumbInput, isStandalone: true, selector: "input[rdxSliderThumbInput]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueTextInput: { classPropertyName: "ariaValueTextInput", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "range" }, listeners: { "keydown": "onKeyDown($event)", "change": "onChange($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "style.writing-mode": "writingMode()", "attr.min": "root.min()", "attr.max": "root.max()", "attr.step": "root.step()", "value": "thumb.value() ?? \"\"", "disabled": "thumb.disabled()", "attr.name": "root.name()", "attr.form": "root.form()", "attr.aria-orientation": "root.orientation()", "attr.aria-valuenow": "thumb.value()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-index": "thumb.index()" }, styleAttribute: "position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit;" }, exportAs: ["rdxSliderThumbInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderThumbImplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumbInput, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxSliderThumbImpl]',
+                    selector: 'input[rdxSliderThumbInput]',
+                    exportAs: 'rdxSliderThumbInput',
                     host: {
-                        role: 'slider',
-                        '[tabindex]': 'rootContext.disabled() ? undefined : 0',
-                        '[attr.aria-valuenow]': 'rootContext.modelValue()',
-                        '[attr.aria-valuemin]': 'rootContext.min()',
-                        '[attr.aria-valuemax]': 'rootContext.max()',
-                        '[attr.aria-orientation]': 'rootContext.orientation()',
-                        '[attr.data-orientation]': 'rootContext.orientation()',
-                        '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
-                        '[style]': 'combinedStyles()',
-                        '(focus)': 'onFocus()'
+                        type: 'range',
+                        style: 'position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit;',
+                        '[style.writing-mode]': 'writingMode()',
+                        '[attr.min]': 'root.min()',
+                        '[attr.max]': 'root.max()',
+                        '[attr.step]': 'root.step()',
+                        '[value]': 'thumb.value() ?? ""',
+                        '[disabled]': 'thumb.disabled()',
+                        '[attr.name]': 'root.name()',
+                        '[attr.form]': 'root.form()',
+                        '[attr.aria-orientation]': 'root.orientation()',
+                        '[attr.aria-valuenow]': 'thumb.value()',
+                        '[attr.aria-valuetext]': 'valueText()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy()',
+                        '[attr.data-index]': 'thumb.index()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(change)': 'onChange($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaValueTextInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuetext", required: false }] }] } });
 
-class RdxSliderThumbComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxSliderThumbComponent, isStandalone: true, selector: "rdx-slider-thumb", hostDirectives: [{ directive: RdxSliderThumbImplDirective }], ngImport: i0, template: `
-        <ng-content />
-    `, isInline: true }); }
+/**
+ * The track of the slider — the positioning context for the indicator and thumbs.
+ *
+ * @see https://base-ui.com/react/components/slider
+ */
+class RdxSliderTrack {
+    constructor() {
+        this.root = injectSliderRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSliderTrack, isStandalone: true, selector: "div[rdxSliderTrack]", host: { properties: { "attr.data-orientation": "root.orientation()", "attr.data-disabled": "root.isDisabled() ? \"\" : undefined", "attr.data-dragging": "root.dragging() ? \"\" : undefined" }, styleAttribute: "position: relative;" }, exportAs: ["rdxSliderTrack"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderThumbComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderTrack, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'rdx-slider-thumb',
-                    hostDirectives: [RdxSliderThumbImplDirective],
-                    template: `
-        <ng-content />
-    `
+                    selector: 'div[rdxSliderTrack]',
+                    exportAs: 'rdxSliderTrack',
+                    host: {
+                        style: 'position: relative;',
+                        '[attr.data-orientation]': 'root.orientation()',
+                        '[attr.data-disabled]': 'root.isDisabled() ? "" : undefined',
+                        '[attr.data-dragging]': 'root.dragging() ? "" : undefined'
+                    }
                 }]
         }] });
 
-class RdxSliderTrackComponent {
+/**
+ * Displays the slider's current value(s) as formatted text. Renders into an
+ * `output` element; the displayed value honours the root `format` and `locale`.
+ *
+ * @see https://base-ui.com/react/components/slider
+ */
+class RdxSliderValue {
     constructor() {
-        this.rootContext = inject(RdxSliderRootComponent);
+        this.root = injectSliderRootContext();
+        /** The separator placed between values of a range slider. */
+        this.separator = input(' – ', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+        this.display = computed(() => this.root
+            .values()
+            .map((value) => this.root.formatValue(value) || `${value}`)
+            .join(this.separator()), ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderTrackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxSliderTrackComponent, isStandalone: true, selector: "rdx-slider-track", host: { properties: { "attr.data-disabled": "rootContext.disabled() ? '' : undefined", "attr.data-orientation": "rootContext.orientation()" } }, ngImport: i0, template: `
-        <ng-content />
-    `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderValue, isStandalone: true, selector: "output[rdxSliderValue]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "off" }, properties: { "textContent": "display()" } }, exportAs: ["rdxSliderValue"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderTrackComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderValue, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'rdx-slider-track',
+                    selector: 'output[rdxSliderValue]',
+                    exportAs: 'rdxSliderValue',
                     host: {
-                        '[attr.data-disabled]': "rootContext.disabled() ? '' : undefined",
-                        '[attr.data-orientation]': 'rootContext.orientation()'
-                    },
-                    template: `
-        <ng-content />
-    `
+                        'aria-live': 'off',
+                        '[textContent]': 'display()'
+                    }
                 }]
-        }] });
+        }], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
 
-const _imports = [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent];
+const _imports = [
+    RdxSliderRoot,
+    RdxSliderControl,
+    RdxSliderTrack,
+    RdxSliderIndicator,
+    RdxSliderThumb,
+    RdxSliderThumbInput,
+    RdxSliderValue
+];
 class RdxSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderModule, imports: [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent], exports: [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderModule, imports: [RdxSliderRoot,
+            RdxSliderControl,
+            RdxSliderTrack,
+            RdxSliderIndicator,
+            RdxSliderThumb,
+            RdxSliderThumbInput,
+            RdxSliderValue], exports: [RdxSliderRoot,
+            RdxSliderControl,
+            RdxSliderTrack,
+            RdxSliderIndicator,
+            RdxSliderThumb,
+            RdxSliderThumbInput,
+            RdxSliderValue] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],
@@ -857,5 +1113,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxSliderHorizontalComponent, RdxSliderImplDirective, RdxSliderModule, RdxSliderRangeComponent, RdxSliderRootComponent, RdxSliderThumbComponent, RdxSliderThumbImplDirective, RdxSliderTrackComponent, RdxSliderVerticalComponent };
+export { ALL_KEYS, ARROW_KEYS, COMPOSITE_KEYS, RdxSliderControl, RdxSliderIndicator, RdxSliderModule, RdxSliderRoot, RdxSliderThumb, RdxSliderThumbInput, RdxSliderTrack, RdxSliderValue, areValuesEqual, asc, formatNumber, getControlOffset, getDecimalPrecision, getDefaultAriaValueText, getMidpoint, getNewValue, getPushedThumbValues, getSliderValue, injectSliderRootContext, provideSliderRootContext, replaceArrayItemAtIndex, resolveThumbCollision, roundValueToStep, validateMinimumDistance, valueArrayToPercentages, valueToPercent };
 //# sourceMappingURL=radix-ng-primitives-slider.mjs.map