primeng/fesm2022/primeng-slider.mjs

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

export * from 'primeng/types/slider';
import * as i0 from '@angular/core';
import { Injectable, forwardRef, inject, input, booleanAttribute, numberAttribute, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { 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 = {
    root: () => ({
        display: 'flex',
        position: 'relative',
        'touch-action': 'none'
    }),
    track: () => ({
        display: 'block',
        'flex-grow': 1,
        position: 'relative'
    }),
    range: ({ instance }) => {
        if (instance.range()) {
            const vals = instance.values() ?? [0, 0];
            const startPercent = instance.getValuePercent(Math.min(vals[0], vals[1]));
            const endPercent = instance.getValuePercent(Math.max(vals[0], vals[1]));
            const sizePercent = Math.max(endPercent - startPercent, 0);
            if (instance.isHorizontal()) {
                return { position: 'absolute', 'inset-inline-start': startPercent + '%', width: sizePercent + '%' };
            }
            else {
                return { position: 'absolute', bottom: startPercent + '%', height: sizePercent + '%' };
            }
        }
        else {
            const percent = instance.getValuePercent(instance.value() ?? 0);
            if (instance.isHorizontal()) {
                return { position: 'absolute', width: percent + '%' };
            }
            else {
                return { position: 'absolute', bottom: '0', height: percent + '%' };
            }
        }
    },
    handle: ({ instance, index }) => {
        const i = index ?? 0;
        const handleValue = instance.getHandleValue(i);
        const percent = instance.getValuePercent(handleValue);
        const disabled = instance.isHandleDisabled(i);
        const base = disabled ? { cursor: 'default', 'pointer-events': 'none' } : {};
        if (instance.isHorizontal()) {
            return { ...base, position: 'absolute', 'inset-inline-start': percent + '%', translate: '-50% 0' };
        }
        else {
            return { ...base, position: 'absolute', bottom: percent + '%', translate: '0 50%' };
        }
    },
    startHandler: ({ instance }) => {
        const handleValue = instance.getHandleValue(0);
        const percent = instance.getValuePercent(handleValue);
        const disabled = instance.isHandleDisabled(0);
        const base = disabled ? { cursor: 'default', 'pointer-events': 'none' } : {};
        if (instance.isHorizontal()) {
            return { ...base, position: 'absolute', 'inset-inline-start': percent + '%', translate: '-50% 0' };
        }
        else {
            return { ...base, position: 'absolute', bottom: percent + '%', translate: '0 50%' };
        }
    },
    endHandler: ({ instance }) => {
        const handleValue = instance.getHandleValue(1);
        const percent = instance.getValuePercent(handleValue);
        const disabled = instance.isHandleDisabled(1);
        const base = disabled ? { cursor: 'default', 'pointer-events': 'none' } : {};
        if (instance.isHorizontal()) {
            return { ...base, position: 'absolute', 'inset-inline-start': percent + '%', translate: '-50% 0' };
        }
        else {
            return { ...base, position: 'absolute', bottom: percent + '%', translate: '0 50%' };
        }
    }
};
const classes = {
    root: ({ instance }) => [
        'p-slider p-component',
        {
            'p-disabled': instance.$disabled(),
            'p-slider-horizontal': instance.isHorizontal(),
            'p-slider-vertical': instance.isVertical()
        }
    ],
    track: 'p-slider-track',
    range: 'p-slider-range',
    handle: 'p-slider-handle',
    input: 'p-slider-input'
};
class SliderStyle extends BaseStyle {
    name = 'slider';
    style = style;
    classes = classes;
    inlineStyles = inlineStyles;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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 track element
     */
    SliderClasses["track"] = "p-slider-track";
    /**
     * Class name of the range element
     */
    SliderClasses["range"] = "p-slider-range";
    /**
     * Class name of the handle element
     */
    SliderClasses["handle"] = "p-slider-handle";
    /**
     * Class name of the hidden input element
     */
    SliderClasses["input"] = "p-slider-input";
})(SliderClasses || (SliderClasses = {}));

const SLIDER_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => Slider),
    multi: true
};
/**
 * Slider is a component to provide input by dragging a handle along a track.
 * @group Components
 */
class Slider extends BaseEditableHolder {
    componentName = 'Slider';
    bindDirectiveInstance = inject(Bind, { self: true });
    _componentStyle = inject(SliderStyle);
    /**
     * When enabled, displays an animation on click of the slider bar.
     * @group Props
     * @deprecated This property is no longer functional.
     */
    animate = input(undefined, { ...(ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Mininum boundary value.
     * @group Props
     */
    min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    /**
     * Maximum boundary value.
     * @group Props
     */
    max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    /**
     * Orientation of the slider.
     * @group Props
     */
    orientation = input('horizontal', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
    /**
     * Step factor to increment/decrement the value.
     * @group Props
     */
    step = input(undefined, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    /**
     * When specified, allows two boundary values to be picked.
     * @group Props
     */
    range = input(undefined, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Minimum number of steps between handles in range mode.
     * @group Props
     */
    minStepsBetweenHandles = input(0, { ...(ngDevMode ? { debugName: "minStepsBetweenHandles" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    /**
     * Disables the minimum (start) handle in range mode.
     * @type boolean
     * @defaultValue false
     * @group Props
     */
    disabledMinHandle = input(false, { ...(ngDevMode ? { debugName: "disabledMinHandle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Disables the maximum (end) handle in range mode.
     * @type boolean
     * @defaultValue false
     * @group Props
     */
    disabledMaxHandle = input(false, { ...(ngDevMode ? { debugName: "disabledMaxHandle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Defines a string that labels the input for accessibility.
     * @group Props
     */
    ariaLabel = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
    /**
     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
     * @group Props
     */
    ariaLabelledBy = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
    /**
     * Index of the element in tabbing order.
     * @group Props
     */
    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    /**
     * When present, it specifies that the component should automatically get focus on load.
     * @group Props
     */
    autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Callback to invoke on value change.
     * @param {SliderChangeEvent} event - Custom value change event.
     * @group Emits
     */
    onChange = output();
    /**
     * Callback to invoke when slide ended.
     * @param {SliderSlideEndEvent} event - Custom slide end event.
     * @group Emits
     */
    onSlideEnd = output();
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    value = signal(null, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
    values = signal(null, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
    isDragging = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
    dragging = computed(() => this.isDragging(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
    dataDragging = computed(() => (this.isDragging() ? '' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataDragging" }] : /* istanbul ignore next */ []));
    activeIndex = 0;
    get handleIndex() {
        return this.activeIndex;
    }
    focusedIndex = null;
    isHandlePointerDown = false;
    dragOffsetPx = 0;
    isHorizontal = computed(() => this.orientation() === 'horizontal', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
    isVertical = computed(() => this.orientation() === 'vertical', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
    $step = computed(() => this.step() || 1, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "$step" }] : /* istanbul ignore next */ []));
    $tabindex = computed(() => (this.$disabled() ? -1 : this.tabindex()), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "$tabindex" }] : /* istanbul ignore next */ []));
    isHandleDisabled(index) {
        return this.$disabled() || (index === 0 && this.disabledMinHandle()) || (index === 1 && this.disabledMaxHandle());
    }
    getDataDisabled(index) {
        return this.isHandleDisabled(index) ? '' : null;
    }
    getHandleTabindex(index) {
        return this.isHandleDisabled(index) ? -1 : this.$tabindex();
    }
    dataP = computed(() => this.cn({
        [this.orientation()]: this.orientation()
    }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
    clamp(value, minVal, maxVal) {
        return Math.min(Math.max(value, minVal), maxVal);
    }
    getPrecision(stepValue) {
        const stepString = stepValue.toString();
        if (stepString.includes('e-')) {
            return Number(stepString.split('e-')[1] || 0);
        }
        const dotIndex = stepString.indexOf('.');
        return dotIndex >= 0 ? stepString.length - dotIndex - 1 : 0;
    }
    roundToStep(value, stepValue, minValue) {
        if (!stepValue)
            return value;
        const precision = this.getPrecision(stepValue);
        const rounded = Math.round((value - minValue) / stepValue) * stepValue + minValue;
        return Number(rounded.toFixed(precision));
    }
    normalizeValue(value) {
        const s = this.step() || 1;
        return this.clamp(this.roundToStep(value, s, this.min()), this.min(), this.max());
    }
    getValuePercent(value) {
        const rangeValue = this.max() - this.min();
        if (!rangeValue)
            return 0;
        return this.clamp(((value - this.min()) / rangeValue) * 100, 0, 100);
    }
    getHandleValue(index) {
        const values = this.getValues();
        return values[index] ?? this.min();
    }
    getValues() {
        if (this.range()) {
            const vals = this.values() ?? [this.min(), this.min()];
            return vals.map((v) => this.normalizeValue(v));
        }
        else {
            return [this.normalizeValue(this.value() ?? this.min())];
        }
    }
    getValueFromPointer(event, offsetPx = 0) {
        const rect = this.el.nativeElement.getBoundingClientRect();
        const size = this.isHorizontal() ? rect.width : rect.height;
        if (!size)
            return this.min();
        const pointerPosition = this.isHorizontal() ? event.clientX - rect.left : event.clientY - rect.top;
        const position = (pointerPosition - offsetPx) / size;
        const clampedPosition = this.clamp(position, 0, 1);
        const isRtl = this.isHorizontal() && isRTL(this.el.nativeElement);
        const orientedPosition = this.isHorizontal() ? (isRtl ? 1 - clampedPosition : clampedPosition) : 1 - clampedPosition;
        const value = this.min() + orientedPosition * (this.max() - this.min());
        return this.normalizeValue(value);
    }
    getClosestValueIndex(values, nextValue, event) {
        const enabledIndices = values.map((_, i) => i).filter((i) => !this.isHandleDisabled(i));
        if (!enabledIndices.length)
            return -1;
        let closestIndex = enabledIndices[0];
        let smallestDistance = Math.abs(values[closestIndex] - nextValue);
        const pointerAxis = event ? (this.isHorizontal() ? event.clientX : event.clientY) : null;
        for (const i of enabledIndices.slice(1)) {
            const distance = Math.abs(values[i] - nextValue);
            if (distance < smallestDistance) {
                closestIndex = i;
                smallestDistance = distance;
            }
            else if (distance === smallestDistance && pointerAxis !== null) {
                const closestEl = this.getHandleElement(closestIndex);
                const candidateEl = this.getHandleElement(i);
                if (closestEl && candidateEl) {
                    const closestRect = closestEl.getBoundingClientRect();
                    const candidateRect = candidateEl.getBoundingClientRect();
                    const closestCenter = this.isHorizontal() ? closestRect.left + closestRect.width / 2 : closestRect.top + closestRect.height / 2;
                    const candidateCenter = this.isHorizontal() ? candidateRect.left + candidateRect.width / 2 : candidateRect.top + candidateRect.height / 2;
                    if (closestCenter === candidateCenter) {
                        closestIndex = pointerAxis < closestCenter ? Math.min(closestIndex, i) : Math.max(closestIndex, i);
                    }
                    else {
                        const closestDelta = Math.abs(pointerAxis - closestCenter);
                        const candidateDelta = Math.abs(pointerAxis - candidateCenter);
                        if (candidateDelta < closestDelta) {
                            closestIndex = i;
                        }
                    }
                }
            }
        }
        return closestIndex;
    }
    getHandleElement(index) {
        return this.el.nativeElement.querySelector(`[data-index="${index}"]`);
    }
    updateValueAt(index, nextValue, event) {
        const values = this.getValues();
        const clampedValue = this.clamp(this.normalizeValue(nextValue), this.min(), this.max());
        if (this.range()) {
            const minDistance = Math.max(this.minStepsBetweenHandles() * (this.step() || 1), 0);
            const minBound = index > 0 ? values[index - 1] + minDistance : this.min();
            const maxBound = index < values.length - 1 ? values[index + 1] - minDistance : this.max();
            const lowerBound = Math.min(minBound, maxBound);
            const upperBound = Math.max(minBound, maxBound);
            const boundedValue = this.clamp(clampedValue, lowerBound, upperBound);
            const newVals = [...values];
            newVals[index] = boundedValue;
            this.values.set(newVals);
            this.onModelChange(newVals);
            this.onChange.emit({ event, values: newVals });
        }
        else {
            this.value.set(clampedValue);
            this.onModelChange(clampedValue);
            this.onChange.emit({ event, value: clampedValue });
        }
    }
    updateValueFromPointer(event) {
        const nextValue = this.getValueFromPointer(event, this.dragOffsetPx);
        const values = this.getValues();
        if (this.range()) {
            const closestIndex = this.getClosestValueIndex(values, nextValue, event);
            if (closestIndex === -1)
                return;
            this.activeIndex = closestIndex;
            this.dragOffsetPx = 0;
            this.updateValueAt(this.activeIndex, nextValue, event);
        }
        else {
            if (this.isHandleDisabled(0))
                return;
            this.activeIndex = 0;
            this.dragOffsetPx = 0;
            this.updateValueAt(0, nextValue, event);
        }
    }
    // --- Pointer event handlers ---
    onTrackPointerDown(event) {
        if (this.$disabled())
            return;
        if (event.pointerType === 'mouse' && event.button !== 0)
            return;
        event.preventDefault();
        event.currentTarget.setPointerCapture(event.pointerId);
        this.isDragging.set(true);
        if (this.isHandlePointerDown) {
            this.isHandlePointerDown = false;
            return;
        }
        this.dragOffsetPx = 0;
        this.updateValueFromPointer(event);
    }
    onTrackPointerMove(event) {
        if (this.$disabled())
            return;
        if (!this.isDragging())
            return;
        if (this.isHandleDisabled(this.activeIndex))
            return;
        event.preventDefault();
        this.updateValueAt(this.activeIndex, this.getValueFromPointer(event, this.dragOffsetPx), event);
    }
    onTrackPointerUp(event) {
        if (this.$disabled())
            return;
        event.preventDefault();
        event.currentTarget.releasePointerCapture(event.pointerId);
        this.isDragging.set(false);
        this.isHandlePointerDown = false;
        this.dragOffsetPx = 0;
        if (this.range()) {
            this.onSlideEnd.emit({ originalEvent: event, values: this.values() });
        }
        else {
            this.onSlideEnd.emit({ originalEvent: event, value: this.value() });
        }
    }
    onHandlePointerDown(event, index) {
        if (this.$disabled())
            return;
        if (event.pointerType === 'mouse' && event.button !== 0)
            return;
        event.preventDefault();
        const handle = this.getHandleElement(index);
        if (handle) {
            const handleRect = handle.getBoundingClientRect();
            const handleCenter = this.isHorizontal() ? handleRect.left + handleRect.width / 2 : handleRect.top + handleRect.height / 2;
            const pointerAxis = this.isHorizontal() ? event.clientX : event.clientY;
            this.dragOffsetPx = pointerAxis - handleCenter;
        }
        else {
            this.dragOffsetPx = 0;
        }
        this.activeIndex = index;
        this.isHandlePointerDown = true;
    }
    // --- Input event handlers ---
    onInputChange(event, index) {
        if (this.isHandleDisabled(index))
            return;
        this.activeIndex = index;
        const nextValue = Number(event.target.value);
        this.updateValueAt(index, nextValue, event);
        if (this.range()) {
            this.onSlideEnd.emit({ originalEvent: event, values: this.values() });
        }
        else {
            this.onSlideEnd.emit({ originalEvent: event, value: this.value() });
        }
    }
    onInputFocus(_event, index) {
        if (this.isHandleDisabled(index))
            return;
        this.focusedIndex = index;
        this.activeIndex = index;
    }
    onInputBlur(event, index) {
        if (this.isHandleDisabled(index))
            return;
        this.activeIndex = index;
        if (this.focusedIndex === index) {
            this.focusedIndex = null;
        }
        if (this.range()) {
            this.onSlideEnd.emit({ originalEvent: event, values: this.values() });
        }
        else {
            this.onSlideEnd.emit({ originalEvent: event, value: this.value() });
        }
        this.onModelTouched();
    }
    // --- Keyboard ---
    onKeyDown(event, index) {
        if (this.isHandleDisabled(index))
            return;
        this.activeIndex = index;
        const s = this.step() || 1;
        switch (event.code) {
            case 'ArrowDown':
            case 'ArrowLeft':
                this.decrementValue(event, index, s);
                event.preventDefault();
                break;
            case 'ArrowUp':
            case 'ArrowRight':
                this.incrementValue(event, index, s);
                event.preventDefault();
                break;
            case 'PageDown':
                this.decrementValue(event, index, s * 10);
                event.preventDefault();
                break;
            case 'PageUp':
                this.incrementValue(event, index, s * 10);
                event.preventDefault();
                break;
            case 'Home':
                this.updateValueAt(index, this.min(), event);
                event.preventDefault();
                break;
            case 'End':
                this.updateValueAt(index, this.max(), event);
                event.preventDefault();
                break;
            default:
                break;
        }
    }
    decrementValue(event, index, amount) {
        const currentVal = this.getHandleValue(index);
        this.updateValueAt(index, currentVal - amount, event);
    }
    incrementValue(event, index, amount) {
        const currentVal = this.getHandleValue(index);
        this.updateValueAt(index, currentVal + amount, event);
    }
    /**
     * @override
     *
     * @see {@link BaseEditableHolder.writeControlValue}
     */
    writeControlValue(value) {
        if (this.range())
            this.values.set(value || [0, 0]);
        else
            this.value.set(value || 0);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: Slider, isStandalone: true, selector: "p-slider", inputs: { animate: { classPropertyName: "animate", publicName: "animate", 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 }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenHandles: { classPropertyName: "minStepsBetweenHandles", publicName: "minStepsBetweenHandles", isSignal: true, isRequired: false, transformFunction: null }, disabledMinHandle: { classPropertyName: "disabledMinHandle", publicName: "disabledMinHandle", isSignal: true, isRequired: false, transformFunction: null }, disabledMaxHandle: { classPropertyName: "disabledMaxHandle", publicName: "disabledMaxHandle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onSlideEnd: "onSlideEnd" }, host: { listeners: { "pointerdown": "onTrackPointerDown($event)", "pointermove": "onTrackPointerMove($event)", "pointerup": "onTrackPointerUp($event)" }, properties: { "class": "cx('root')", "style": "sx('root')", "attr.data-orientation": "orientation()", "attr.data-dragging": "dataDragging()" } }, providers: [SLIDER_VALUE_ACCESSOR, SliderStyle, { provide: PARENT_INSTANCE, useExisting: Slider }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
        <div [class]="cx('track')" [pBind]="ptm('track')" [style]="sx('track')">
            <span [class]="cx('range')" [style]="sx('range')" [pBind]="ptm('range')"></span>
        </div>
        @if (!range()) {
            <span [class]="cx('handle')" [style]="sx('handle', true, { index: 0 })" (pointerdown)="onHandlePointerDown($event, 0)" [attr.data-index]="0" [attr.data-disabled]="getDataDisabled(0)" [pBind]="ptm('handle')">
                <input
                    type="range"
                    [class]="cx('input')"
                    [min]="min()"
                    [max]="max()"
                    [step]="$step()"
                    [value]="getHandleValue(0)"
                    [disabled]="isHandleDisabled(0)"
                    [attr.aria-valuemin]="min()"
                    [attr.aria-valuemax]="max()"
                    [attr.aria-valuenow]="getHandleValue(0)"
                    [attr.aria-orientation]="orientation()"
                    [attr.aria-label]="ariaLabel()"
                    [attr.aria-labelledby]="ariaLabelledBy()"
                    [attr.tabindex]="getHandleTabindex(0)"
                    [pAutoFocus]="autofocus()"
                    (input)="onInputChange($event, 0)"
                    (change)="onInputChange($event, 0)"
                    (focus)="onInputFocus($event, 0)"
                    (blur)="onInputBlur($event, 0)"
                    (keydown)="onKeyDown($event, 0)"
                    [pBind]="ptm('input')"
                />
            </span>
        }
        @if (range()) {
            <span [class]="cx('handle', { index: 0 })" [style]="sx('startHandler')" (pointerdown)="onHandlePointerDown($event, 0)" [attr.data-index]="0" [attr.data-disabled]="getDataDisabled(0)" [pBind]="ptm('startHandler')">
                <input
                    type="range"
                    [class]="cx('input')"
                    [min]="min()"
                    [max]="max()"
                    [step]="$step()"
                    [value]="getHandleValue(0)"
                    [disabled]="isHandleDisabled(0)"
                    [attr.aria-valuemin]="min()"
                    [attr.aria-valuemax]="max()"
                    [attr.aria-valuenow]="getHandleValue(0)"
                    [attr.aria-orientation]="orientation()"
                    [attr.aria-label]="ariaLabel()"
                    [attr.aria-labelledby]="ariaLabelledBy()"
                    [attr.tabindex]="getHandleTabindex(0)"
                    [pAutoFocus]="autofocus()"
                    (input)="onInputChange($event, 0)"
                    (change)="onInputChange($event, 0)"
                    (focus)="onInputFocus($event, 0)"
                    (blur)="onInputBlur($event, 0)"
                    (keydown)="onKeyDown($event, 0)"
                    [pBind]="ptm('input')"
                />
            </span>
            <span [class]="cx('handle', { index: 1 })" [style]="sx('endHandler')" (pointerdown)="onHandlePointerDown($event, 1)" [attr.data-index]="1" [attr.data-disabled]="getDataDisabled(1)" [pBind]="ptm('endHandler')">
                <input
                    type="range"
                    [class]="cx('input')"
                    [min]="min()"
                    [max]="max()"
                    [step]="$step()"
                    [value]="getHandleValue(1)"
                    [disabled]="isHandleDisabled(1)"
                    [attr.aria-valuemin]="min()"
                    [attr.aria-valuemax]="max()"
                    [attr.aria-valuenow]="getHandleValue(1)"
                    [attr.aria-orientation]="orientation()"
                    [attr.aria-label]="ariaLabel()"
                    [attr.aria-labelledby]="ariaLabelledBy()"
                    [attr.tabindex]="getHandleTabindex(1)"
                    (input)="onInputChange($event, 1)"
                    (change)="onInputChange($event, 1)"
                    (focus)="onInputFocus($event, 1)"
                    (blur)="onInputBlur($event, 1)"
                    (keydown)="onKeyDown($event, 1)"
                    [pBind]="ptm('input')"
                />
            </span>
        }
    `, isInline: true, dependencies: [{ 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: "22.0.6", ngImport: i0, type: Slider, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-slider',
                    standalone: true,
                    imports: [AutoFocus, SharedModule, BindModule],
                    template: `
        <div [class]="cx('track')" [pBind]="ptm('track')" [style]="sx('track')">
            <span [class]="cx('range')" [style]="sx('range')" [pBind]="ptm('range')"></span>
        </div>
        @if (!range()) {
            <span [class]="cx('handle')" [style]="sx('handle', true, { index: 0 })" (pointerdown)="onHandlePointerDown($event, 0)" [attr.data-index]="0" [attr.data-disabled]="getDataDisabled(0)" [pBind]="ptm('handle')">
                <input
                    type="range"
                    [class]="cx('input')"
                    [min]="min()"
                    [max]="max()"
                    [step]="$step()"
                    [value]="getHandleValue(0)"
                    [disabled]="isHandleDisabled(0)"
                    [attr.aria-valuemin]="min()"
                    [attr.aria-valuemax]="max()"
                    [attr.aria-valuenow]="getHandleValue(0)"
                    [attr.aria-orientation]="orientation()"
                    [attr.aria-label]="ariaLabel()"
                    [attr.aria-labelledby]="ariaLabelledBy()"
                    [attr.tabindex]="getHandleTabindex(0)"
                    [pAutoFocus]="autofocus()"
                    (input)="onInputChange($event, 0)"
                    (change)="onInputChange($event, 0)"
                    (focus)="onInputFocus($event, 0)"
                    (blur)="onInputBlur($event, 0)"
                    (keydown)="onKeyDown($event, 0)"
                    [pBind]="ptm('input')"
                />
            </span>
        }
        @if (range()) {
            <span [class]="cx('handle', { index: 0 })" [style]="sx('startHandler')" (pointerdown)="onHandlePointerDown($event, 0)" [attr.data-index]="0" [attr.data-disabled]="getDataDisabled(0)" [pBind]="ptm('startHandler')">
                <input
                    type="range"
                    [class]="cx('input')"
                    [min]="min()"
                    [max]="max()"
                    [step]="$step()"
                    [value]="getHandleValue(0)"
                    [disabled]="isHandleDisabled(0)"
                    [attr.aria-valuemin]="min()"
                    [attr.aria-valuemax]="max()"
                    [attr.aria-valuenow]="getHandleValue(0)"
                    [attr.aria-orientation]="orientation()"
                    [attr.aria-label]="ariaLabel()"
                    [attr.aria-labelledby]="ariaLabelledBy()"
                    [attr.tabindex]="getHandleTabindex(0)"
                    [pAutoFocus]="autofocus()"
                    (input)="onInputChange($event, 0)"
                    (change)="onInputChange($event, 0)"
                    (focus)="onInputFocus($event, 0)"
                    (blur)="onInputBlur($event, 0)"
                    (keydown)="onKeyDown($event, 0)"
                    [pBind]="ptm('input')"
                />
            </span>
            <span [class]="cx('handle', { index: 1 })" [style]="sx('endHandler')" (pointerdown)="onHandlePointerDown($event, 1)" [attr.data-index]="1" [attr.data-disabled]="getDataDisabled(1)" [pBind]="ptm('endHandler')">
                <input
                    type="range"
                    [class]="cx('input')"
                    [min]="min()"
                    [max]="max()"
                    [step]="$step()"
                    [value]="getHandleValue(1)"
                    [disabled]="isHandleDisabled(1)"
                    [attr.aria-valuemin]="min()"
                    [attr.aria-valuemax]="max()"
                    [attr.aria-valuenow]="getHandleValue(1)"
                    [attr.aria-orientation]="orientation()"
                    [attr.aria-label]="ariaLabel()"
                    [attr.aria-labelledby]="ariaLabelledBy()"
                    [attr.tabindex]="getHandleTabindex(1)"
                    (input)="onInputChange($event, 1)"
                    (change)="onInputChange($event, 1)"
                    (focus)="onInputFocus($event, 1)"
                    (blur)="onInputBlur($event, 1)"
                    (keydown)="onKeyDown($event, 1)"
                    [pBind]="ptm('input')"
                />
            </span>
        }
    `,
                    providers: [SLIDER_VALUE_ACCESSOR, SliderStyle, { provide: PARENT_INSTANCE, useExisting: Slider }],
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        '[class]': "cx('root')",
                        '[style]': "sx('root')",
                        '[attr.data-orientation]': 'orientation()',
                        '[attr.data-dragging]': 'dataDragging()',
                        '(pointerdown)': 'onTrackPointerDown($event)',
                        '(pointermove)': 'onTrackPointerMove($event)',
                        '(pointerup)': 'onTrackPointerUp($event)'
                    },
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], minStepsBetweenHandles: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetweenHandles", required: false }] }], disabledMinHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMinHandle", required: false }] }], disabledMaxHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMaxHandle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onSlideEnd: [{ type: i0.Output, args: ["onSlideEnd"] }] } });
class SliderModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule], exports: [Slider, SharedModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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