@ops-prime/primeng 0.0.0-stage → 21.1.11

package/fesm2022/primeng-slider.mjs

@@ -0,0 +1,889 @@
+export * from 'primeng/types/slider';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, forwardRef, inject, EventEmitter, NgZone, booleanAttribute, numberAttribute, HostListener, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { removeClass, addClass, getWindowScrollLeft, getWindowScrollTop, isRTL } from '@primeuix/utils';
+import { SharedModule } from 'primeng/api';
+import { AutoFocus } from 'primeng/autofocus';
+import { PARENT_INSTANCE } from 'primeng/basecomponent';
+import { BaseEditableHolder } from 'primeng/baseeditableholder';
+import * as i1 from 'primeng/bind';
+import { Bind, BindModule } from 'primeng/bind';
+import { style } from '@primeuix/styles/slider';
+import { BaseStyle } from 'primeng/base';
+
+const inlineStyles = {
+    handle: { position: 'absolute' },
+    range: { position: 'absolute' }
+};
+const classes = {
+    root: ({ instance }) => [
+        'p-slider p-component',
+        {
+            'p-disabled': instance.$disabled(),
+            'p-invalid': instance.invalid(),
+            'p-slider-horizontal': instance.orientation === 'horizontal',
+            'p-slider-vertical': instance.orientation === 'vertical',
+            'p-slider-animate': instance.animate
+        }
+    ],
+    range: 'p-slider-range',
+    handle: 'p-slider-handle'
+};
+class SliderStyle extends BaseStyle {
+    name = 'slider';
+    style = style;
+    classes = classes;
+    inlineStyles = inlineStyles;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SliderStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SliderStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SliderStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Slider is a component to provide input with a drag handle.
+ *
+ * [Live Demo](https://www.primeng.org/slider/)
+ *
+ * @module sliderstyle
+ *
+ */
+var SliderClasses;
+(function (SliderClasses) {
+    /**
+     * Class name of the root element
+     */
+    SliderClasses["root"] = "p-slider";
+    /**
+     * Class name of the range element
+     */
+    SliderClasses["range"] = "p-slider-range";
+    /**
+     * Class name of the handle element
+     */
+    SliderClasses["handle"] = "p-slider-handle";
+})(SliderClasses || (SliderClasses = {}));
+
+const SLIDER_INSTANCE = new InjectionToken('SLIDER_INSTANCE');
+const SLIDER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => Slider),
+    multi: true
+};
+/**
+ * Slider is a component to provide input with a drag handle.
+ * @group Components
+ */
+class Slider extends BaseEditableHolder {
+    componentName = 'Slider';
+    $pcSlider = inject(SLIDER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * When enabled, displays an animation on click of the slider bar.
+     * @group Props
+     */
+    animate;
+    /**
+     * Mininum boundary value.
+     * @group Props
+     */
+    min = 0;
+    /**
+     * Maximum boundary value.
+     * @group Props
+     */
+    max = 100;
+    /**
+     * Orientation of the slider.
+     * @group Props
+     */
+    orientation = 'horizontal';
+    /**
+     * Step factor to increment/decrement the value.
+     * @group Props
+     */
+    step;
+    /**
+     * When specified, allows two boundary values to be picked.
+     * @group Props
+     */
+    range;
+    /**
+     * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Defines a string that labels the input for accessibility.
+     * @group Props
+     */
+    ariaLabel;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * @group Props
+     */
+    ariaLabelledBy;
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex = 0;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    autofocus;
+    /**
+     * Callback to invoke on value change.
+     * @param {SliderChangeEvent} event - Custom value change event.
+     * @group Emits
+     */
+    onChange = new EventEmitter();
+    /**
+     * Callback to invoke when slide ended.
+     * @param {SliderSlideEndEvent} event - Custom slide end event.
+     * @group Emits
+     */
+    onSlideEnd = new EventEmitter();
+    sliderHandle;
+    sliderHandleStart;
+    sliderHandleEnd;
+    _componentStyle = inject(SliderStyle);
+    value;
+    values;
+    handleValue;
+    handleValues = [];
+    diff;
+    offset;
+    bottom;
+    dragging;
+    dragListener;
+    mouseupListener;
+    initX;
+    initY;
+    barWidth;
+    barHeight;
+    sliderHandleClick;
+    handleIndex = 0;
+    startHandleValue;
+    startx;
+    starty;
+    ngZone = inject(NgZone);
+    onHostClick(event) {
+        this.onBarClick(event);
+    }
+    onMouseDown(event, index) {
+        if (this.$disabled()) {
+            return;
+        }
+        this.dragging = true;
+        this.updateDomData();
+        this.sliderHandleClick = true;
+        if (this.range && this.handleValues && this.handleValues[0] === this.max) {
+            this.handleIndex = 0;
+        }
+        else {
+            this.handleIndex = index;
+        }
+        this.bindDragListeners();
+        event.target.focus();
+        event.preventDefault();
+        if (this.animate) {
+            removeClass(this.el.nativeElement, 'p-slider-animate');
+        }
+    }
+    onDragStart(event, index) {
+        if (this.$disabled()) {
+            return;
+        }
+        this.el.nativeElement.setAttribute('data-p-sliding', true);
+        var touchobj = event.changedTouches[0];
+        this.startHandleValue = this.range ? this.handleValues[index] : this.handleValue;
+        this.dragging = true;
+        if (this.range && this.handleValues && this.handleValues[0] === this.max) {
+            this.handleIndex = 0;
+        }
+        else {
+            this.handleIndex = index;
+        }
+        if (this.orientation === 'horizontal') {
+            this.startx = parseInt(touchobj.clientX, 10);
+            this.barWidth = this.el.nativeElement.offsetWidth;
+        }
+        else {
+            this.starty = parseInt(touchobj.clientY, 10);
+            this.barHeight = this.el.nativeElement.offsetHeight;
+        }
+        if (this.animate) {
+            removeClass(this.el.nativeElement, 'p-slider-animate');
+        }
+        event.preventDefault();
+    }
+    onDrag(event) {
+        if (this.$disabled()) {
+            return;
+        }
+        var touchobj = event.changedTouches[0], handleValue = 0;
+        if (this.orientation === 'horizontal') {
+            handleValue = Math.floor(((parseInt(touchobj.clientX, 10) - this.startx) * 100) / this.barWidth) + this.startHandleValue;
+        }
+        else {
+            handleValue = Math.floor(((this.starty - parseInt(touchobj.clientY, 10)) * 100) / this.barHeight) + this.startHandleValue;
+        }
+        this.setValueFromHandle(event, handleValue);
+        event.preventDefault();
+    }
+    onDragEnd(event) {
+        if (this.$disabled()) {
+            return;
+        }
+        this.dragging = false;
+        this.el.nativeElement.setAttribute('data-p-sliding', false);
+        if (this.range)
+            this.onSlideEnd.emit({ originalEvent: event, values: this.values });
+        else
+            this.onSlideEnd.emit({ originalEvent: event, value: this.value });
+        if (this.animate) {
+            addClass(this.el.nativeElement, 'p-slider-animate');
+        }
+        event.preventDefault();
+    }
+    onBarClick(event) {
+        if (this.$disabled()) {
+            return;
+        }
+        if (!this.sliderHandleClick) {
+            this.updateDomData();
+            this.handleChange(event);
+            if (this.range)
+                this.onSlideEnd.emit({ originalEvent: event, values: this.values });
+            else
+                this.onSlideEnd.emit({ originalEvent: event, value: this.value });
+        }
+        this.sliderHandleClick = false;
+    }
+    onKeyDown(event, index) {
+        this.handleIndex = index;
+        switch (event.code) {
+            case 'ArrowDown':
+            case 'ArrowLeft':
+                this.decrementValue(event, index);
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+            case 'ArrowRight':
+                this.incrementValue(event, index);
+                event.preventDefault();
+                break;
+            case 'PageDown':
+                this.decrementValue(event, index, true);
+                event.preventDefault();
+                break;
+            case 'PageUp':
+                this.incrementValue(event, index, true);
+                event.preventDefault();
+                break;
+            case 'Home':
+                this.updateValue(this.min, event);
+                event.preventDefault();
+                break;
+            case 'End':
+                this.updateValue(this.max, event);
+                event.preventDefault();
+                break;
+            default:
+                break;
+        }
+    }
+    decrementValue(event, index, pageKey = false) {
+        let newValue;
+        if (this.range) {
+            if (this.step)
+                newValue = (this.values?.[index] ?? 0) - this.step;
+            else
+                newValue = (this.values?.[index] ?? 0) - 1;
+        }
+        else {
+            if (this.step)
+                newValue = this.value - this.step;
+            else if (!this.step && pageKey)
+                newValue = this.value - 10;
+            else
+                newValue = this.value - 1;
+        }
+        this.updateValue(newValue, event);
+        event.preventDefault();
+    }
+    incrementValue(event, index, pageKey = false) {
+        let newValue;
+        if (this.range) {
+            if (this.step)
+                newValue = (this.values?.[index] ?? 0) + this.step;
+            else
+                newValue = (this.values?.[index] ?? 0) + 1;
+        }
+        else {
+            if (this.step)
+                newValue = this.value + this.step;
+            else if (!this.step && pageKey)
+                newValue = this.value + 10;
+            else
+                newValue = this.value + 1;
+        }
+        this.updateValue(newValue, event);
+        event.preventDefault();
+    }
+    handleChange(event) {
+        let handleValue = this.calculateHandleValue(event);
+        this.setValueFromHandle(event, handleValue);
+    }
+    bindDragListeners() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.ngZone.runOutsideAngular(() => {
+                const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document;
+                if (!this.dragListener) {
+                    this.dragListener = this.renderer.listen(documentTarget, 'mousemove', (event) => {
+                        if (this.dragging) {
+                            this.el.nativeElement.setAttribute('data-p-sliding', true);
+                            this.ngZone.run(() => {
+                                this.handleChange(event);
+                            });
+                        }
+                    });
+                }
+                if (!this.mouseupListener) {
+                    this.mouseupListener = this.renderer.listen(documentTarget, 'mouseup', (event) => {
+                        if (this.dragging) {
+                            this.dragging = false;
+                            this.el.nativeElement.setAttribute('data-p-sliding', false);
+                            this.ngZone.run(() => {
+                                if (this.range)
+                                    this.onSlideEnd.emit({ originalEvent: event, values: this.values });
+                                else
+                                    this.onSlideEnd.emit({ originalEvent: event, value: this.value });
+                                if (this.animate) {
+                                    addClass(this.el.nativeElement, 'p-slider-animate');
+                                }
+                            });
+                        }
+                    });
+                }
+            });
+        }
+    }
+    unbindDragListeners() {
+        if (this.dragListener) {
+            this.dragListener();
+            this.dragListener = null;
+        }
+        if (this.mouseupListener) {
+            this.mouseupListener();
+            this.mouseupListener = null;
+        }
+    }
+    setValueFromHandle(event, handleValue) {
+        let newValue = this.getValueFromHandle(handleValue);
+        if (this.range) {
+            if (this.step) {
+                this.handleStepChange(newValue, this.values[this.handleIndex]);
+            }
+            else {
+                this.handleValues[this.handleIndex] = handleValue;
+                this.updateValue(newValue, event);
+            }
+        }
+        else {
+            if (this.step) {
+                this.handleStepChange(newValue, this.value);
+            }
+            else {
+                this.handleValue = handleValue;
+                this.updateValue(newValue, event);
+            }
+        }
+        this.cd.markForCheck();
+    }
+    handleStepChange(newValue, oldValue) {
+        let diff = newValue - oldValue;
+        let val = oldValue;
+        let _step = this.step;
+        if (diff < 0) {
+            val = oldValue + Math.ceil(newValue / _step - oldValue / _step) * _step;
+        }
+        else if (diff > 0) {
+            val = oldValue + Math.floor(newValue / _step - oldValue / _step) * _step;
+        }
+        this.updateValue(val);
+        this.updateHandleValue();
+    }
+    get rangeStartLeft() {
+        if (!this.isVertical())
+            return this.handleValues[0] > 100 ? 100 + '%' : this.handleValues[0] + '%';
+        return null;
+    }
+    get rangeStartBottom() {
+        return this.isVertical() ? this.handleValues[0] + '%' : 'auto';
+    }
+    get rangeEndLeft() {
+        return this.isVertical() ? null : this.handleValues[1] + '%';
+    }
+    get rangeEndBottom() {
+        return this.isVertical() ? this.handleValues[1] + '%' : 'auto';
+    }
+    isVertical() {
+        return this.orientation === 'vertical';
+    }
+    updateDomData() {
+        let rect = this.el.nativeElement.getBoundingClientRect();
+        this.initX = rect.left + getWindowScrollLeft();
+        this.initY = rect.top + getWindowScrollTop();
+        this.barWidth = this.el.nativeElement.offsetWidth;
+        this.barHeight = this.el.nativeElement.offsetHeight;
+    }
+    calculateHandleValue(event) {
+        if (this.orientation === 'horizontal') {
+            if (isRTL(this.el.nativeElement)) {
+                return ((this.initX + this.barWidth - event.pageX) * 100) / this.barWidth;
+            }
+            else {
+                return ((event.pageX - this.initX) * 100) / this.barWidth;
+            }
+        }
+        else {
+            return ((this.initY + this.barHeight - event.pageY) * 100) / this.barHeight;
+        }
+    }
+    updateHandleValue() {
+        if (this.range) {
+            this.handleValues[0] = ((this.values[0] < this.min ? 0 : this.values[0] - this.min) * 100) / (this.max - this.min);
+            this.handleValues[1] = ((this.values[1] > this.max ? 100 : this.values[1] - this.min) * 100) / (this.max - this.min);
+        }
+        else {
+            if (this.value < this.min)
+                this.handleValue = 0;
+            else if (this.value > this.max)
+                this.handleValue = 100;
+            else
+                this.handleValue = ((this.value - this.min) * 100) / (this.max - this.min);
+        }
+        if (this.step) {
+            this.updateDiffAndOffset();
+        }
+    }
+    updateDiffAndOffset() {
+        this.diff = this.getDiff();
+        this.offset = this.getOffset();
+    }
+    getDiff() {
+        return Math.abs(this.handleValues[0] - this.handleValues[1]);
+    }
+    getOffset() {
+        return Math.min(this.handleValues[0], this.handleValues[1]);
+    }
+    updateValue(val, event) {
+        if (this.range) {
+            let value = val;
+            if (this.handleIndex == 0) {
+                if (value < this.min) {
+                    value = this.min;
+                    this.handleValues[0] = 0;
+                }
+                else if (value > this.values[1]) {
+                    if (value > this.max) {
+                        value = this.max;
+                        this.handleValues[0] = 100;
+                    }
+                }
+                this.sliderHandleStart?.nativeElement.focus();
+            }
+            else {
+                if (value > this.max) {
+                    value = this.max;
+                    this.handleValues[1] = 100;
+                    this.offset = this.handleValues[1];
+                }
+                else if (value < this.min) {
+                    value = this.min;
+                    this.handleValues[1] = 0;
+                }
+                else if (value < this.values[0]) {
+                    this.offset = this.handleValues[1];
+                }
+                this.sliderHandleEnd?.nativeElement.focus();
+            }
+            if (this.step) {
+                this.updateHandleValue();
+            }
+            else {
+                this.updateDiffAndOffset();
+            }
+            this.values[this.handleIndex] = this.getNormalizedValue(value);
+            let newValues = [this.minVal, this.maxVal];
+            this.onModelChange(newValues);
+            this.onChange.emit({ event: event, values: this.values });
+        }
+        else {
+            if (val < this.min) {
+                val = this.min;
+                this.handleValue = 0;
+            }
+            else if (val > this.max) {
+                val = this.max;
+                this.handleValue = 100;
+            }
+            this.value = this.getNormalizedValue(val);
+            this.onModelChange(this.value);
+            this.onChange.emit({ event: event, value: this.value });
+            this.sliderHandle?.nativeElement.focus();
+        }
+        this.updateHandleValue();
+    }
+    getValueFromHandle(handleValue) {
+        return (this.max - this.min) * (handleValue / 100) + this.min;
+    }
+    getDecimalsCount(value) {
+        if (value && Math.floor(value) !== value)
+            return value.toString().split('.')[1].length || 0;
+        return 0;
+    }
+    getNormalizedValue(val) {
+        let decimalsCount = this.getDecimalsCount(this.step);
+        if (decimalsCount > 0) {
+            return +parseFloat(val.toString()).toFixed(decimalsCount);
+        }
+        else {
+            return Math.floor(val);
+        }
+    }
+    onDestroy() {
+        this.unbindDragListeners();
+    }
+    get minVal() {
+        return Math.min(this.values[1], this.values[0]);
+    }
+    get maxVal() {
+        return Math.max(this.values[1], this.values[0]);
+    }
+    /**
+     * @override
+     *
+     * @see {@link BaseEditableHolder.writeControlValue}
+     * Writes the value to the control.
+     */
+    writeControlValue(value) {
+        if (this.range)
+            this.values = value || [0, 0];
+        else
+            this.value = value || 0;
+        this.updateHandleValue();
+        this.updateDiffAndOffset();
+        this.cd.markForCheck();
+    }
+    get dataP() {
+        return this.cn({
+            [this.orientation]: this.orientation
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.22", type: Slider, isStandalone: true, selector: "p-slider", inputs: { animate: ["animate", "animate", booleanAttribute], min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], orientation: "orientation", step: ["step", "step", numberAttribute], range: ["range", "range", booleanAttribute], styleClass: "styleClass", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", tabindex: ["tabindex", "tabindex", numberAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onChange: "onChange", onSlideEnd: "onSlideEnd" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "attr.data-pc-name": "'slider'", "attr.data-pc-section": "'root'", "class": "cn(cx('root'), styleClass)", "attr.data-p": "dataP", "attr.data-p-sliding": "false" } }, providers: [SLIDER_VALUE_ACCESSOR, SliderStyle, { provide: SLIDER_INSTANCE, useExisting: Slider }, { provide: PARENT_INSTANCE, useExisting: Slider }], viewQueries: [{ propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true }, { propertyName: "sliderHandleStart", first: true, predicate: ["sliderHandleStart"], descendants: true }, { propertyName: "sliderHandleEnd", first: true, predicate: ["sliderHandleEnd"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <span
+            *ngIf="range && orientation == 'horizontal'"
+            [class]="cx('range')"
+            [ngStyle]="{
+                'inset-inline-start': offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',
+                width: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'
+            }"
+            [style]="sx('range')"
+            [attr.data-pc-section]="'range'"
+            [attr.data-p]="dataP"
+            [pBind]="ptm('range')"
+        ></span>
+        <span
+            *ngIf="range && orientation == 'vertical'"
+            [class]="cx('range')"
+            [ngStyle]="{
+                bottom: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',
+                height: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'
+            }"
+            [style]="sx('range')"
+            [attr.data-pc-section]="'range'"
+            [attr.data-p]="dataP"
+            [pBind]="ptm('range')"
+        ></span>
+        <span *ngIf="!range && orientation == 'vertical'" [class]="cx('range')" [attr.data-pc-section]="'range'" [style]="sx('range')" [ngStyle]="{ height: handleValue + '%' }" [pBind]="ptm('range')"></span>
+        <span *ngIf="!range && orientation == 'horizontal'" [class]="cx('range')" [attr.data-pc-section]="'range'" [style]="sx('range')" [ngStyle]="{ width: handleValue + '%' }" [pBind]="ptm('range')"></span>
+        <span
+            *ngIf="!range"
+            #sliderHandle
+            [class]="cx('handle')"
+            [style.transition]="dragging ? 'none' : null"
+            [ngStyle]="{
+                'inset-inline-start': orientation == 'horizontal' ? handleValue + '%' : null,
+                bottom: orientation == 'vertical' ? handleValue + '%' : null
+            }"
+            [style]="sx('handle')"
+            (touchstart)="onDragStart($event)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            (mousedown)="onMouseDown($event)"
+            (keydown)="onKeyDown($event)"
+            [attr.tabindex]="$disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'handle'"
+            [pAutoFocus]="autofocus"
+            [pBind]="ptm('handle')"
+            [attr.data-p]="dataP"
+        ></span>
+        <span
+            *ngIf="range"
+            #sliderHandleStart
+            [style.transition]="dragging ? 'none' : null"
+            [class]="cn(cx('handle'), handleIndex == 0 && 'p-slider-handle-active')"
+            [style]="sx('handle')"
+            [ngStyle]="{ 'inset-inline-start': rangeStartLeft, bottom: rangeStartBottom }"
+            (keydown)="onKeyDown($event, 0)"
+            (mousedown)="onMouseDown($event, 0)"
+            (touchstart)="onDragStart($event, 0)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            [attr.tabindex]="$disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value ? value[0] : null"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'startHandler'"
+            [pAutoFocus]="autofocus"
+            [pBind]="ptm('startHandler')"
+            [attr.data-p]="dataP"
+        ></span>
+        <span
+            *ngIf="range"
+            #sliderHandleEnd
+            [style.transition]="dragging ? 'none' : null"
+            [class]="cn(cx('handle'), handleIndex == 1 && 'p-slider-handle-active')"
+            [ngStyle]="{ 'inset-inline-start': rangeEndLeft, bottom: rangeEndBottom }"
+            [style]="sx('handle')"
+            (keydown)="onKeyDown($event, 1)"
+            (mousedown)="onMouseDown($event, 1)"
+            (touchstart)="onDragStart($event, 1)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            [attr.tabindex]="$disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value ? value[1] : null"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'endHandler'"
+            [pBind]="ptm('endHandler')"
+            [attr.data-p]="dataP"
+        ></span>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: Slider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-slider',
+                    standalone: true,
+                    imports: [CommonModule, AutoFocus, SharedModule, BindModule],
+                    template: `
+        <span
+            *ngIf="range && orientation == 'horizontal'"
+            [class]="cx('range')"
+            [ngStyle]="{
+                'inset-inline-start': offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',
+                width: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'
+            }"
+            [style]="sx('range')"
+            [attr.data-pc-section]="'range'"
+            [attr.data-p]="dataP"
+            [pBind]="ptm('range')"
+        ></span>
+        <span
+            *ngIf="range && orientation == 'vertical'"
+            [class]="cx('range')"
+            [ngStyle]="{
+                bottom: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',
+                height: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'
+            }"
+            [style]="sx('range')"
+            [attr.data-pc-section]="'range'"
+            [attr.data-p]="dataP"
+            [pBind]="ptm('range')"
+        ></span>
+        <span *ngIf="!range && orientation == 'vertical'" [class]="cx('range')" [attr.data-pc-section]="'range'" [style]="sx('range')" [ngStyle]="{ height: handleValue + '%' }" [pBind]="ptm('range')"></span>
+        <span *ngIf="!range && orientation == 'horizontal'" [class]="cx('range')" [attr.data-pc-section]="'range'" [style]="sx('range')" [ngStyle]="{ width: handleValue + '%' }" [pBind]="ptm('range')"></span>
+        <span
+            *ngIf="!range"
+            #sliderHandle
+            [class]="cx('handle')"
+            [style.transition]="dragging ? 'none' : null"
+            [ngStyle]="{
+                'inset-inline-start': orientation == 'horizontal' ? handleValue + '%' : null,
+                bottom: orientation == 'vertical' ? handleValue + '%' : null
+            }"
+            [style]="sx('handle')"
+            (touchstart)="onDragStart($event)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            (mousedown)="onMouseDown($event)"
+            (keydown)="onKeyDown($event)"
+            [attr.tabindex]="$disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'handle'"
+            [pAutoFocus]="autofocus"
+            [pBind]="ptm('handle')"
+            [attr.data-p]="dataP"
+        ></span>
+        <span
+            *ngIf="range"
+            #sliderHandleStart
+            [style.transition]="dragging ? 'none' : null"
+            [class]="cn(cx('handle'), handleIndex == 0 && 'p-slider-handle-active')"
+            [style]="sx('handle')"
+            [ngStyle]="{ 'inset-inline-start': rangeStartLeft, bottom: rangeStartBottom }"
+            (keydown)="onKeyDown($event, 0)"
+            (mousedown)="onMouseDown($event, 0)"
+            (touchstart)="onDragStart($event, 0)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            [attr.tabindex]="$disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value ? value[0] : null"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'startHandler'"
+            [pAutoFocus]="autofocus"
+            [pBind]="ptm('startHandler')"
+            [attr.data-p]="dataP"
+        ></span>
+        <span
+            *ngIf="range"
+            #sliderHandleEnd
+            [style.transition]="dragging ? 'none' : null"
+            [class]="cn(cx('handle'), handleIndex == 1 && 'p-slider-handle-active')"
+            [ngStyle]="{ 'inset-inline-start': rangeEndLeft, bottom: rangeEndBottom }"
+            [style]="sx('handle')"
+            (keydown)="onKeyDown($event, 1)"
+            (mousedown)="onMouseDown($event, 1)"
+            (touchstart)="onDragStart($event, 1)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            [attr.tabindex]="$disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value ? value[1] : null"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'endHandler'"
+            [pBind]="ptm('endHandler')"
+            [attr.data-p]="dataP"
+        ></span>
+    `,
+                    providers: [SLIDER_VALUE_ACCESSOR, SliderStyle, { provide: SLIDER_INSTANCE, useExisting: Slider }, { provide: PARENT_INSTANCE, useExisting: Slider }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[attr.data-pc-name]': "'slider'",
+                        '[attr.data-pc-section]': "'root'",
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[attr.data-p]': 'dataP',
+                        '[attr.data-p-sliding]': 'false'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { animate: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], min: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], max: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], orientation: [{
+                type: Input
+            }], step: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], range: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], styleClass: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], tabindex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], autofocus: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], onChange: [{
+                type: Output
+            }], onSlideEnd: [{
+                type: Output
+            }], sliderHandle: [{
+                type: ViewChild,
+                args: ['sliderHandle']
+            }], sliderHandleStart: [{
+                type: ViewChild,
+                args: ['sliderHandleStart']
+            }], sliderHandleEnd: [{
+                type: ViewChild,
+                args: ['sliderHandleEnd']
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+class SliderModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule], exports: [Slider, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Slider, SharedModule],
+                    exports: [Slider, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SLIDER_VALUE_ACCESSOR, Slider, SliderClasses, SliderModule, SliderStyle };
+//# sourceMappingURL=primeng-slider.mjs.map