ng-primitives 0.95.0 → 0.97.0

package/fesm2022/ng-primitives-slider.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Directive, input, numberAttribute, output, booleanAttribute, HostListener } from '@angular/core';
+import { signal, computed, Directive, input, numberAttribute, output, booleanAttribute } from '@angular/core';
 import { injectElementRef } from 'ng-primitives/internal';
-import { createPrimitive, controlled, emitter, attrBinding, dataBinding, deprecatedSetter, styleBinding, listener, createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { createPrimitive, controlled, emitter, attrBinding, dataBinding, deprecatedSetter, styleBinding, listener, onDestroy } from 'ng-primitives/state';
 import { ngpFormControl } from 'ng-primitives/form-field';
 import { uniqueId } from 'ng-primitives/utils';
 import { ngpInteractions } from 'ng-primitives/interactions';
@@ -32,9 +32,11 @@ const [NgpSliderStateToken, ngpSlider, injectSliderState, provideSliderState] =
     }
     function setValue(newValue) {
         const clamped = Math.min(max(), Math.max(min(), newValue));
-        value.set(clamped);
-        onValueChange?.(clamped);
-        valueChange.emit(clamped);
+        const stepped = Math.round((clamped - min()) / step()) * step() + min();
+        const finalValue = Math.min(max(), Math.max(min(), stepped));
+        value.set(finalValue);
+        onValueChange?.(finalValue);
+        valueChange.emit(finalValue);
     }
     function setDisabled(isDisabled) {
         disabled.set(isDisabled);
@@ -366,266 +368,329 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpSliderValueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderMin", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderMax", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderStep", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderOrientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderDisabled", required: false }] }] } });
 
-/**
- * The state token for the Range Slider primitive.
- */
-const NgpRangeSliderStateToken = createStateToken('RangeSlider');
-/**
- * Provides the Range Slider state.
- */
-const provideRangeSliderState = createStateProvider(NgpRangeSliderStateToken);
-/**
- * Injects the Range Slider state.
- */
-const injectRangeSliderState = createStateInjector(NgpRangeSliderStateToken);
-/**
- * The Range Slider state registration function.
- */
-const rangeSliderState = createState(NgpRangeSliderStateToken);
+const [NgpRangeSliderStateToken, ngpRangeSlider, injectRangeSliderState, provideRangeSliderState,] = createPrimitive('NgpRangeSlider', ({ id = signal(uniqueId('ngp-range-slider')), low: _low = signal(0), high: _high = signal(100), min = signal(0), max = signal(100), step = signal(1), orientation: _orientation = signal('horizontal'), disabled: _disabled = signal(false), onLowChange, onHighChange, }) => {
+    console.log('Creating RangeSliderState', _low(), _high(), min(), max());
+    const element = injectElementRef();
+    const low = controlled(_low);
+    const high = controlled(_high);
+    const disabled = controlled(_disabled);
+    const orientation = controlled(_orientation);
+    const lowChange = emitter();
+    const highChange = emitter();
+    const track = signal(undefined, ...(ngDevMode ? [{ debugName: "track" }] : []));
+    const thumbs = signal([], ...(ngDevMode ? [{ debugName: "thumbs" }] : []));
+    // Form control integration
+    const status = ngpFormControl({ id, disabled });
+    const lowPercentage = computed(() => {
+        const range = max() - min();
+        if (range <= 0)
+            return 0;
+        return ((low() - min()) / range) * 100;
+    }, ...(ngDevMode ? [{ debugName: "lowPercentage" }] : []));
+    const highPercentage = computed(() => {
+        const range = max() - min();
+        if (range <= 0)
+            return 100;
+        return ((high() - min()) / range) * 100;
+    }, ...(ngDevMode ? [{ debugName: "highPercentage" }] : []));
+    const rangePercentage = computed(() => highPercentage() - lowPercentage(), ...(ngDevMode ? [{ debugName: "rangePercentage" }] : []));
+    // Host bindings
+    attrBinding(element, 'id', id);
+    dataBinding(element, 'data-orientation', orientation);
+    dataBinding(element, 'data-disabled', status().disabled);
+    function setLowValue(value) {
+        const clampedValue = Math.max(min(), Math.min(value, high()));
+        const steppedValue = Math.round((clampedValue - min()) / step()) * step() + min();
+        low.set(steppedValue);
+        onLowChange?.(steppedValue);
+        lowChange.emit(steppedValue);
+    }
+    function setHighValue(value) {
+        const clampedValue = Math.min(max(), Math.max(value, low()));
+        const steppedValue = Math.round((clampedValue - min()) / step()) * step() + min();
+        high.set(steppedValue);
+        onHighChange?.(steppedValue);
+        highChange.emit(steppedValue);
+    }
+    function getClosestThumb(percentage) {
+        const value = min() + (max() - min()) * (percentage / 100);
+        const distanceToLow = Math.abs(value - low());
+        const distanceToHigh = Math.abs(value - high());
+        return distanceToLow <= distanceToHigh ? 'low' : 'high';
+    }
+    function addThumb(thumb) {
+        thumbs.update(t => [...t, thumb]);
+    }
+    function removeThumb(thumb) {
+        thumbs.update(t => t.filter(existing => existing !== thumb));
+    }
+    function setDisabled(isDisabled) {
+        disabled.set(isDisabled);
+    }
+    function setOrientation(newOrientation) {
+        orientation.set(newOrientation);
+    }
+    function setTrack(newTrack) {
+        track.set(newTrack);
+    }
+    return {
+        id,
+        low,
+        high,
+        min,
+        max,
+        step,
+        orientation: deprecatedSetter(orientation, 'setOrientation'),
+        disabled: deprecatedSetter(disabled, 'setDisabled'),
+        lowPercentage,
+        highPercentage,
+        rangePercentage,
+        track,
+        thumbs,
+        lowChange: lowChange.asObservable(),
+        highChange: highChange.asObservable(),
+        setLowValue,
+        setHighValue,
+        getClosestThumb,
+        addThumb,
+        removeThumb,
+        setDisabled,
+        setOrientation,
+        setTrack,
+    };
+});
+
+const [NgpRangeSliderRangeStateToken, ngpRangeSliderRange, injectRangeSliderRangeState, provideRangeSliderRangeState,] = createPrimitive('NgpRangeSliderRange', ({}) => {
+    const element = injectElementRef();
+    const rangeSlider = injectRangeSliderState();
+    // Host bindings
+    dataBinding(element, 'data-orientation', () => rangeSlider().orientation());
+    dataBinding(element, 'data-disabled', () => rangeSlider().disabled());
+    // Horizontal
+    styleBinding(element, 'width.%', () => rangeSlider().orientation() === 'horizontal' ? rangeSlider().rangePercentage() : null);
+    styleBinding(element, 'inset-inline-start.%', () => rangeSlider().orientation() === 'horizontal' ? rangeSlider().lowPercentage() : null);
+    // Vertical
+    styleBinding(element, 'height.%', () => rangeSlider().orientation() === 'vertical' ? rangeSlider().rangePercentage() : null);
+    styleBinding(element, 'inset-block-start.%', () => rangeSlider().orientation() === 'vertical' ? rangeSlider().lowPercentage() : null);
+    return {};
+});
 
 /**
  * Apply the `ngpRangeSliderRange` directive to an element that represents the range between the low and high values.
  */
 class NgpRangeSliderRange {
     constructor() {
-        /**
-         * Access the range slider state.
-         */
-        this.rangeSliderState = injectRangeSliderState();
+        ngpRangeSliderRange({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderRange, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpRangeSliderRange, isStandalone: true, selector: "[ngpRangeSliderRange]", host: { properties: { "attr.data-orientation": "rangeSliderState().orientation()", "attr.data-disabled": "rangeSliderState().disabled() ? \"\" : null", "style.width.%": "rangeSliderState().orientation() === \"horizontal\" ? rangeSliderState().rangePercentage() : undefined", "style.height.%": "rangeSliderState().orientation() === \"vertical\" ? rangeSliderState().rangePercentage() : undefined", "style.inset-inline-start.%": "rangeSliderState().orientation() === \"horizontal\" ? rangeSliderState().lowPercentage() : undefined", "style.inset-block-start.%": "rangeSliderState().orientation() === \"vertical\" ? rangeSliderState().lowPercentage() : undefined" } }, exportAs: ["ngpRangeSliderRange"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpRangeSliderRange, isStandalone: true, selector: "[ngpRangeSliderRange]", exportAs: ["ngpRangeSliderRange"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderRange, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpRangeSliderRange]',
                     exportAs: 'ngpRangeSliderRange',
-                    host: {
-                        '[attr.data-orientation]': 'rangeSliderState().orientation()',
-                        '[attr.data-disabled]': 'rangeSliderState().disabled() ? "" : null',
-                        '[style.width.%]': 'rangeSliderState().orientation() === "horizontal" ? rangeSliderState().rangePercentage() : undefined',
-                        '[style.height.%]': 'rangeSliderState().orientation() === "vertical" ? rangeSliderState().rangePercentage() : undefined',
-                        '[style.inset-inline-start.%]': 'rangeSliderState().orientation() === "horizontal" ? rangeSliderState().lowPercentage() : undefined',
-                        '[style.inset-block-start.%]': 'rangeSliderState().orientation() === "vertical" ? rangeSliderState().lowPercentage() : undefined',
-                    },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-/**
- * Apply the `ngpRangeSliderThumb` directive to an element that represents a thumb of the range slider.
- * Each thumb can be configured to control either the 'low' or 'high' value.
- */
-class NgpRangeSliderThumb {
-    constructor() {
-        /**
-         * Access the range slider state.
-         */
-        this.state = injectRangeSliderState();
-        /**
-         * Access the thumb element.
-         */
-        this.elementRef = injectElementRef();
-        /**
-         * Determines which value this thumb controls ('low' or 'high').
-         */
-        this.thumb = computed(() => this.state().thumbs().indexOf(this) === 0 ? 'low' : 'high', ...(ngDevMode ? [{ debugName: "thumb" }] : []));
-        /**
-         * Store the dragging state.
-         */
-        this.dragging = false;
-        /**
-         * Get the current value for this thumb.
-         */
-        this.value = computed(() => this.thumb() === 'low' ? this.state().low() : this.state().high(), ...(ngDevMode ? [{ debugName: "value" }] : []));
-        /**
-         * Get the current percentage for this thumb.
-         */
-        this.percentage = computed(() => this.thumb() === 'low' ? this.state().lowPercentage() : this.state().highPercentage(), ...(ngDevMode ? [{ debugName: "percentage" }] : []));
-        ngpInteractions({
-            hover: true,
-            focusVisible: true,
-            press: true,
-            disabled: this.state().disabled,
-        });
-        this.state().addThumb(this);
-    }
-    ngOnDestroy() {
-        this.state().removeThumb(this);
-    }
-    handlePointerDown(event) {
+const [NgpRangeSliderThumbStateToken, ngpRangeSliderThumb, injectRangeSliderThumbState, provideRangeSliderThumbState,] = createPrimitive('NgpRangeSliderThumb', ({}) => {
+    const element = injectElementRef();
+    const rangeSlider = injectRangeSliderState();
+    // Store dragging state
+    let dragging = false;
+    // Determine which thumb this is based on registration order
+    const thumb = computed(() => (rangeSlider().thumbs().indexOf(element) === 0 ? 'low' : 'high'), ...(ngDevMode ? [{ debugName: "thumb" }] : []));
+    const value = computed(() => (thumb() === 'low' ? rangeSlider().low() : rangeSlider().high()), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    const percentage = computed(() => thumb() === 'low' ? rangeSlider().lowPercentage() : rangeSlider().highPercentage(), ...(ngDevMode ? [{ debugName: "percentage" }] : []));
+    // Setup interactions
+    ngpInteractions({
+        hover: true,
+        focusVisible: true,
+        press: true,
+        disabled: rangeSlider().disabled,
+    });
+    // Host bindings
+    attrBinding(element, 'role', 'slider');
+    attrBinding(element, 'aria-valuemin', () => rangeSlider().min());
+    attrBinding(element, 'aria-valuemax', () => rangeSlider().max());
+    attrBinding(element, 'aria-valuenow', value);
+    attrBinding(element, 'aria-orientation', () => rangeSlider().orientation());
+    attrBinding(element, 'tabindex', () => (rangeSlider().disabled() ? -1 : 0));
+    dataBinding(element, 'data-orientation', () => rangeSlider().orientation());
+    dataBinding(element, 'data-disabled', () => rangeSlider().disabled());
+    dataBinding(element, 'data-thumb', thumb);
+    styleBinding(element, 'inset-inline-start.%', () => rangeSlider().orientation() === 'horizontal' ? percentage() : null);
+    styleBinding(element, 'inset-block-start.%', () => rangeSlider().orientation() === 'vertical' ? percentage() : null);
+    function handlePointerDown(event) {
         event.preventDefault();
-        if (this.state().disabled()) {
+        if (rangeSlider().disabled()) {
             return;
         }
-        this.dragging = true;
+        dragging = true;
     }
-    handlePointerUp() {
-        if (this.state().disabled()) {
+    function handlePointerUp() {
+        if (rangeSlider().disabled()) {
             return;
         }
-        this.dragging = false;
+        dragging = false;
     }
-    handlePointerMove(event) {
-        if (this.state().disabled() || !this.dragging) {
+    function handlePointerMove(event) {
+        if (rangeSlider().disabled() || !dragging) {
             return;
         }
-        const rect = this.state().track()?.element.nativeElement.getBoundingClientRect();
-        if (!rect) {
+        const track = rangeSlider().track();
+        if (!track) {
             return;
         }
-        const percentage = this.state().orientation() === 'horizontal'
-            ? (event.clientX - rect.left) / rect.width
-            : (event.clientY - rect.top) / rect.height;
-        const value = this.state().min() +
-            (this.state().max() - this.state().min()) * Math.max(0, Math.min(1, percentage));
+        const rect = track.nativeElement.getBoundingClientRect();
+        // Calculate the pointer position as a percentage of the track
+        // p.ex. for horizontal: (pointerX - trackLeft) / trackWidth
+        const percentage = rangeSlider().orientation() === 'horizontal'
+            ? ((event.clientX - rect.left) / rect.width) * 100
+            : ((event.clientY - rect.top) / rect.height) * 100;
+        const min = rangeSlider().min();
+        const max = rangeSlider().max();
+        const rangeSize = max - min;
+        const clampedPercentage = Math.max(0, Math.min(100, percentage));
+        const computedValue = min + rangeSize * (clampedPercentage / 100);
         // Update the appropriate value based on thumb type
-        if (this.thumb() === 'low') {
-            this.state().setLowValue(value);
+        if (thumb() === 'low') {
+            rangeSlider().setLowValue(computedValue);
         }
         else {
-            this.state().setHighValue(value);
+            rangeSlider().setHighValue(computedValue);
         }
     }
-    /**
-     * Handle keyboard events.
-     * @param event
-     */
-    handleKeydown(event) {
+    function handleKeydown(event) {
         const multiplier = event.shiftKey ? 10 : 1;
-        const currentValue = this.value();
-        const step = this.state().step() * multiplier;
+        const currentValue = value();
+        const step = rangeSlider().step() * multiplier;
         // determine the document direction
-        const isRTL = getComputedStyle(this.elementRef.nativeElement).direction === 'rtl';
+        const isRTL = getComputedStyle(element.nativeElement).direction === 'rtl';
         let newValue;
         switch (event.key) {
             case 'ArrowLeft':
                 newValue = isRTL
-                    ? Math.min(currentValue - step, this.state().max())
-                    : Math.max(currentValue - step, this.state().min());
+                    ? Math.min(currentValue - step, rangeSlider().max())
+                    : Math.max(currentValue - step, rangeSlider().min());
                 break;
             case 'ArrowDown':
-                newValue = Math.max(currentValue - step, this.state().min());
+                newValue = Math.max(currentValue - step, rangeSlider().min());
                 break;
             case 'ArrowRight':
                 newValue = isRTL
-                    ? Math.max(currentValue + step, this.state().min())
-                    : Math.min(currentValue + step, this.state().max());
+                    ? Math.max(currentValue + step, rangeSlider().min())
+                    : Math.min(currentValue + step, rangeSlider().max());
                 break;
             case 'ArrowUp':
-                newValue = Math.min(currentValue + step, this.state().max());
+                newValue = Math.min(currentValue + step, rangeSlider().max());
                 break;
             case 'Home':
-                newValue = isRTL ? this.state().max() : this.state().min();
+                newValue = isRTL ? rangeSlider().max() : rangeSlider().min();
                 break;
             case 'End':
-                newValue = isRTL ? this.state().min() : this.state().max();
+                newValue = isRTL ? rangeSlider().min() : rangeSlider().max();
                 break;
             default:
                 return;
         }
         // Update the appropriate value based on thumb type
-        if (this.thumb() === 'low') {
-            this.state().setLowValue(newValue);
+        if (thumb() === 'low') {
+            rangeSlider().setLowValue(newValue);
         }
         else {
-            this.state().setHighValue(newValue);
+            rangeSlider().setHighValue(newValue);
         }
         event.preventDefault();
     }
+    // Event listeners
+    listener(element, 'pointerdown', handlePointerDown);
+    listener(document, 'pointerup', handlePointerUp);
+    listener(document, 'pointermove', handlePointerMove);
+    listener(element, 'keydown', handleKeydown);
+    // Register thumb with parent
+    rangeSlider().addThumb(element);
+    // Cleanup on destroy
+    onDestroy(() => rangeSlider().removeThumb(element));
+    return {
+        thumb,
+        value,
+        percentage,
+    };
+});
+
+/**
+ * Apply the `ngpRangeSliderThumb` directive to an element that represents a thumb of the range slider.
+ * Each thumb can be configured to control either the 'low' or 'high' value.
+ */
+class NgpRangeSliderThumb {
+    constructor() {
+        ngpRangeSliderThumb({});
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpRangeSliderThumb, isStandalone: true, selector: "[ngpRangeSliderThumb]", host: { attributes: { "role": "slider" }, listeners: { "pointerdown": "handlePointerDown($event)", "document:pointerup": "handlePointerUp()", "document:pointermove": "handlePointerMove($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-valuemin": "state().min()", "attr.aria-valuemax": "state().max()", "attr.aria-valuenow": "value()", "attr.aria-orientation": "state().orientation()", "tabindex": "state().disabled() ? -1 : 0", "attr.data-orientation": "state().orientation()", "attr.data-disabled": "state().disabled() ? \"\" : null", "attr.data-thumb": "thumb()", "style.inset-inline-start.%": "state().orientation() === \"horizontal\" ? percentage() : undefined", "style.inset-block-start.%": "state().orientation() === \"vertical\" ? percentage() : undefined" } }, exportAs: ["ngpRangeSliderThumb"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpRangeSliderThumb, isStandalone: true, selector: "[ngpRangeSliderThumb]", exportAs: ["ngpRangeSliderThumb"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderThumb, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpRangeSliderThumb]',
                     exportAs: 'ngpRangeSliderThumb',
-                    host: {
-                        role: 'slider',
-                        '[attr.aria-valuemin]': 'state().min()',
-                        '[attr.aria-valuemax]': 'state().max()',
-                        '[attr.aria-valuenow]': 'value()',
-                        '[attr.aria-orientation]': 'state().orientation()',
-                        '[tabindex]': 'state().disabled() ? -1 : 0',
-                        '[attr.data-orientation]': 'state().orientation()',
-                        '[attr.data-disabled]': 'state().disabled() ? "" : null',
-                        '[attr.data-thumb]': 'thumb()',
-                        '[style.inset-inline-start.%]': 'state().orientation() === "horizontal" ? percentage() : undefined',
-                        '[style.inset-block-start.%]': 'state().orientation() === "vertical" ? percentage() : undefined',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { handlePointerDown: [{
-                type: HostListener,
-                args: ['pointerdown', ['$event']]
-            }], handlePointerUp: [{
-                type: HostListener,
-                args: ['document:pointerup']
-            }], handlePointerMove: [{
-                type: HostListener,
-                args: ['document:pointermove', ['$event']]
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+        }], ctorParameters: () => [] });
 
-/**
- * Apply the `ngpRangeSliderTrack` directive to an element that represents the track of the range slider.
- */
-class NgpRangeSliderTrack {
-    constructor() {
-        /**
-         * Access the range slider state.
-         */
-        this.rangeSliderState = injectRangeSliderState();
-        /**
-         * The element that represents the slider track.
-         */
-        this.element = injectElementRef();
-        this.rangeSliderState().track.set(this);
-    }
-    /**
-     * When the slider track is clicked, update the closest thumb value.
-     * @param event The click event.
-     */
-    handlePointerDown(event) {
-        if (this.rangeSliderState().disabled()) {
+const [NgpRangeSliderTrackStateToken, ngpRangeSliderTrack, injectRangeSliderTrackState, provideRangeSliderTrackState,] = createPrimitive('NgpRangeSliderTrack', ({}) => {
+    const element = injectElementRef();
+    const rangeSlider = injectRangeSliderState();
+    // Host bindings
+    dataBinding(element, 'data-orientation', () => rangeSlider().orientation());
+    dataBinding(element, 'data-disabled', () => rangeSlider().disabled());
+    function handlePointerDown(event) {
+        if (rangeSlider().disabled()) {
             return;
         }
         // get the position the click occurred within the slider track
-        const position = this.rangeSliderState().orientation() === 'horizontal' ? event.clientX : event.clientY;
-        const rect = this.element.nativeElement.getBoundingClientRect();
-        const percentage = (position - (this.rangeSliderState().orientation() === 'horizontal' ? rect.left : rect.top)) /
-            (this.rangeSliderState().orientation() === 'horizontal' ? rect.width : rect.height);
+        const isHorizontal = rangeSlider().orientation() === 'horizontal';
+        const max = rangeSlider().max();
+        const min = rangeSlider().min();
+        const position = isHorizontal ? event.clientX : event.clientY;
+        const rect = element.nativeElement.getBoundingClientRect();
+        const start = isHorizontal ? rect.left : rect.top;
+        const size = isHorizontal ? rect.width : rect.height;
+        const percentage = (position - start) / size;
         // calculate the value based on the position
-        const value = this.rangeSliderState().min() +
-            (this.rangeSliderState().max() - this.rangeSliderState().min()) * percentage;
+        const value = min + (max - min) * percentage;
         // determine which thumb to move based on proximity
-        const closestThumb = this.rangeSliderState().getClosestThumb(percentage * 100);
+        const closestThumb = rangeSlider().getClosestThumb(percentage * 100);
         if (closestThumb === 'low') {
-            this.rangeSliderState().setLowValue(value);
+            rangeSlider().setLowValue(value);
         }
         else {
-            this.rangeSliderState().setHighValue(value);
+            rangeSlider().setHighValue(value);
         }
     }
+    // Event listener
+    listener(element, 'pointerdown', handlePointerDown);
+    // Register track with parent
+    rangeSlider().setTrack(element);
+});
+
+/**
+ * Apply the `ngpRangeSliderTrack` directive to an element that represents the track of the range slider.
+ */
+class NgpRangeSliderTrack {
+    constructor() {
+        ngpRangeSliderTrack({});
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpRangeSliderTrack, isStandalone: true, selector: "[ngpRangeSliderTrack]", host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "attr.data-orientation": "rangeSliderState().orientation()", "attr.data-disabled": "rangeSliderState().disabled() ? \"\" : null" } }, exportAs: ["ngpRangeSliderTrack"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpRangeSliderTrack, isStandalone: true, selector: "[ngpRangeSliderTrack]", exportAs: ["ngpRangeSliderTrack"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderTrack, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpRangeSliderTrack]',
                     exportAs: 'ngpRangeSliderTrack',
-                    host: {
-                        '[attr.data-orientation]': 'rangeSliderState().orientation()',
-                        '[attr.data-disabled]': 'rangeSliderState().disabled() ? "" : null',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { handlePointerDown: [{
-                type: HostListener,
-                args: ['pointerdown', ['$event']]
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * Apply the `ngpRangeSlider` directive to an element that represents the range slider and contains the track, range, and thumbs.
@@ -703,88 +768,23 @@ class NgpRangeSlider {
                 transform: booleanAttribute,
             }]));
         /**
-         * Access the slider track.
-         * @internal
+         * The state of the range slider.
          */
-        this.track = signal(undefined, ...(ngDevMode ? [{ debugName: "track" }] : []));
-        /**
-         * The thumbs of the range slider.
-         * @internal
-         */
-        this.thumbs = signal([], ...(ngDevMode ? [{ debugName: "thumbs" }] : []));
-        /**
-         * The low value as a percentage based on the min and max values.
-         * @internal
-         */
-        this.lowPercentage = computed(() => ((this.state.low() - this.state.min()) / (this.state.max() - this.state.min())) * 100, ...(ngDevMode ? [{ debugName: "lowPercentage" }] : []));
-        /**
-         * The high value as a percentage based on the min and max values.
-         * @internal
-         */
-        this.highPercentage = computed(() => ((this.state.high() - this.state.min()) / (this.state.max() - this.state.min())) * 100, ...(ngDevMode ? [{ debugName: "highPercentage" }] : []));
-        /**
-         * The range between low and high values as a percentage.
-         * @internal
-         */
-        this.rangePercentage = computed(() => this.highPercentage() - this.lowPercentage(), ...(ngDevMode ? [{ debugName: "rangePercentage" }] : []));
-        /**
-         * The state of the range slider. We use this for the range slider state rather than relying on the inputs.
-         * @internal
-         */
-        this.state = rangeSliderState(this);
-        ngpFormControl({ id: this.state.id, disabled: this.state.disabled });
-    }
-    /**
-     * Updates the low value, ensuring it doesn't exceed the high value.
-     * @param value The new low value
-     * @internal
-     */
-    setLowValue(value) {
-        const clampedValue = Math.max(this.state.min(), Math.min(value, this.state.high()));
-        this.state.low.set(clampedValue);
-        this.lowChange.emit(clampedValue);
-    }
-    /**
-     * Updates the high value, ensuring it doesn't go below the low value.
-     * @param value The new high value
-     * @internal
-     */
-    setHighValue(value) {
-        const clampedValue = Math.min(this.state.max(), Math.max(value, this.state.low()));
-        this.state.high.set(clampedValue);
-        this.highChange.emit(clampedValue);
-    }
-    /**
-     * Determines which thumb should be moved based on the position clicked.
-     * @param percentage The percentage position of the click
-     * @returns 'low' or 'high' indicating which thumb should move
-     *
-     * @internal
-     */
-    getClosestThumb(percentage) {
-        const value = this.state.min() + (this.state.max() - this.state.min()) * (percentage / 100);
-        const distanceToLow = Math.abs(value - this.state.low());
-        const distanceToHigh = Math.abs(value - this.state.high());
-        return distanceToLow <= distanceToHigh ? 'low' : 'high';
-    }
-    /**
-     * Updates the thumbs array when a new thumb is added.
-     * @param thumb The new thumb to add
-     * @internal
-     */
-    addThumb(thumb) {
-        this.thumbs.update(thumbs => [...thumbs, thumb]);
-    }
-    /**
-     * Removes a thumb from the thumbs array.
-     * @param thumb The thumb to remove
-     * @internal
-     */
-    removeThumb(thumb) {
-        this.thumbs.update(thumbs => thumbs.filter(t => t !== thumb));
+        this.state = ngpRangeSlider({
+            id: this.id,
+            low: this.low,
+            high: this.high,
+            min: this.min,
+            max: this.max,
+            step: this.step,
+            orientation: this.orientation,
+            disabled: this.disabled,
+            onLowChange: value => this.lowChange.emit(value),
+            onHighChange: value => this.highChange.emit(value),
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSlider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpRangeSlider, isStandalone: true, selector: "[ngpRangeSlider]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, low: { classPropertyName: "low", publicName: "ngpRangeSliderLow", isSignal: true, isRequired: false, transformFunction: null }, high: { classPropertyName: "high", publicName: "ngpRangeSliderHigh", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "ngpRangeSliderMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpRangeSliderMax", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "ngpRangeSliderStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "ngpRangeSliderOrientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpRangeSliderDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lowChange: "ngpRangeSliderLowChange", highChange: "ngpRangeSliderHighChange" }, host: { properties: { "id": "id()", "attr.data-orientation": "state.orientation()" } }, providers: [provideRangeSliderState()], exportAs: ["ngpRangeSlider"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpRangeSlider, isStandalone: true, selector: "[ngpRangeSlider]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, low: { classPropertyName: "low", publicName: "ngpRangeSliderLow", isSignal: true, isRequired: false, transformFunction: null }, high: { classPropertyName: "high", publicName: "ngpRangeSliderHigh", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "ngpRangeSliderMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpRangeSliderMax", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "ngpRangeSliderStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "ngpRangeSliderOrientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpRangeSliderDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lowChange: "ngpRangeSliderLowChange", highChange: "ngpRangeSliderHighChange" }, providers: [provideRangeSliderState()], exportAs: ["ngpRangeSlider"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSlider, decorators: [{
             type: Directive,
@@ -792,16 +792,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                     selector: '[ngpRangeSlider]',
                     exportAs: 'ngpRangeSlider',
                     providers: [provideRangeSliderState()],
-                    host: {
-                        '[id]': 'id()',
-                        '[attr.data-orientation]': 'state.orientation()',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], low: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderLow", required: false }] }], lowChange: [{ type: i0.Output, args: ["ngpRangeSliderLowChange"] }], high: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderHigh", required: false }] }], highChange: [{ type: i0.Output, args: ["ngpRangeSliderHighChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderMin", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderMax", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderStep", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderOrientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderDisabled", required: false }] }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], low: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderLow", required: false }] }], lowChange: [{ type: i0.Output, args: ["ngpRangeSliderLowChange"] }], high: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderHigh", required: false }] }], highChange: [{ type: i0.Output, args: ["ngpRangeSliderHighChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderMin", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderMax", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderStep", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderOrientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderDisabled", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpRangeSlider, NgpRangeSliderRange, NgpRangeSliderThumb, NgpRangeSliderTrack, NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack, injectRangeSliderState, injectSliderRangeState, injectSliderState, injectSliderThumbState, injectSliderTrackState, ngpSlider, ngpSliderRange, ngpSliderThumb, ngpSliderTrack, provideRangeSliderState, provideSliderRangeState, provideSliderState, provideSliderThumbState, provideSliderTrackState };
+export { NgpRangeSlider, NgpRangeSliderRange, NgpRangeSliderThumb, NgpRangeSliderTrack, NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack, injectRangeSliderRangeState, injectRangeSliderState, injectRangeSliderThumbState, injectRangeSliderTrackState, injectSliderRangeState, injectSliderState, injectSliderThumbState, injectSliderTrackState, ngpRangeSlider, ngpRangeSliderRange, ngpRangeSliderThumb, ngpRangeSliderTrack, ngpSlider, ngpSliderRange, ngpSliderThumb, ngpSliderTrack, provideRangeSliderRangeState, provideRangeSliderState, provideRangeSliderThumbState, provideRangeSliderTrackState, provideSliderRangeState, provideSliderState, provideSliderThumbState, provideSliderTrackState };
 //# sourceMappingURL=ng-primitives-slider.mjs.map