ng-zorro-antd-mobile/fesm2022/ng-zorro-antd-mobile-slider.mjs

An enterprise-class mobile UI components based on Ant Design and Angular

import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, Input, Output, HostListener, HostBinding, forwardRef, NgModule } from '@angular/core';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1 from '@angular/platform-browser';

class SliderHandleComponent {
    set min(value) {
        this._min = value;
    }
    set max(value) {
        this._max = value;
    }
    set minBound(value) {
        this._minBound = value;
    }
    set maxBound(value) {
        this._maxBound = value;
    }
    set step(value) {
        this._step = value;
    }
    set value(value) {
        this._value = value;
        if (this._value) {
            this.left = this.calcOffset(this._value);
        }
    }
    set disabled(value) {
        this._disabled = value;
    }
    set sliderLength(value) {
        this._sliderLength = value;
    }
    set sliderStart(value) {
        this._sliderStart = value;
    }
    get handleStyle() {
        return this._handleStyle;
    }
    set handleStyle(value) {
        this._handleStyle = value;
    }
    /* 手势操作 */
    panstart(event) {
        // event.preventDefault();
        if (!this._disabled) {
            this._startX = event && event.changedTouches && event.changedTouches[0] && event.changedTouches[0].clientX;
            this._handleStatus = 'start';
            this._isDraging = true;
        }
    }
    panmove(event) {
        event.preventDefault();
        if (!this._disabled && this._isDraging) {
            const pos = event.changedTouches[0].clientX;
            this._value = Math.round(this.calcValueByPos(pos));
            this.left = this.calcOffset(this._value);
            if (this._oldValue !== this._value) {
                this._oldValue = this._value;
                this.onChange.emit(this._value);
            }
        }
    }
    panend(event) {
        event.preventDefault();
        if (!this._disabled && this._isDraging) {
            this._handleStatus = 'end';
            this._isDraging = false;
            const pos = event.changedTouches[0].clientX;
            this._value = Math.round(this.calcValueByPos(pos));
            this.left = this.calcOffset(this._value);
            this.onAfterChange.emit(this._value);
        }
    }
    constructor(_elf, _sanitizer) {
        this._elf = _elf;
        this._sanitizer = _sanitizer;
        this._disabled = false;
        this._marks = {};
        this._isDraging = false;
        this.onChange = new EventEmitter();
        this.onAfterChange = new EventEmitter();
        this.mouseDown = event => {
            if (!this._disabled && this.isMouseTarget(event)) {
                this._startX = event.clientX;
                this._handleStatus = 'start';
                this._isDraging = true;
                document.addEventListener('mousemove', this.mouseMove, false);
                document.addEventListener('mouseup', this.mouseUp, false);
                this.pauseEvent(event);
            }
        };
        this.mouseMove = event => {
            if (!this._disabled && this._isDraging) {
                this.pauseEvent(event);
                const pos = event.clientX;
                this._value = Math.round(this.calcValueByPos(pos));
                this.left = this.calcOffset(this._value);
                if (this._oldValue !== this._value) {
                    this._oldValue = this._value;
                    this.onChange.emit(this._value);
                }
            }
        };
        this.mouseUp = event => {
            if (!this._disabled && this._isDraging) {
                this._handleStatus = 'end';
                this._isDraging = false;
                const pos = event.clientX;
                this._value = Math.round(this.calcValueByPos(pos));
                this.left = this.calcOffset(this._value);
                this.onAfterChange.emit(this._value);
            }
        };
    }
    calcValueByPos(pos) {
        const offset = pos - this._sliderStart;
        let value = this.calcValue(offset);
        if (value <= this._minBound) {
            value = this._minBound;
        }
        if (value >= this._maxBound) {
            value = this._maxBound;
        }
        const closestPoint = this.getClosestPoint(value);
        return this._step === null ? closestPoint : parseFloat(closestPoint.toFixed(this.getPrecision(this._step)));
    }
    calcValue(offset) {
        const ratio = Math.abs(Math.max(offset, 0) / this._sliderLength);
        const value = ratio * (this._max - this._min) + this._min;
        return value;
    }
    getClosestPoint(val) {
        const points = Object.keys(this._marks).map(parseFloat);
        if (this._step !== null) {
            const closestStep = Math.round((val - this._min) / this._step) * this._step + this._min;
            points.push(closestStep);
        }
        const diffs = points.map(function (point) {
            return Math.abs(val - point);
        });
        return points[diffs.indexOf(Math.min.apply(Math, this.toConsumableArray(diffs)))];
    }
    getPrecision(step) {
        const stepString = step.toString();
        let precision = 0;
        if (stepString.indexOf('.') >= 0) {
            precision = stepString.length - stepString.indexOf('.') - 1;
        }
        return precision;
    }
    calcOffset(value) {
        const ratio = (value - this._min) / (this._max - this._min);
        return ratio * 100;
    }
    pauseEvent(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    isMouseTarget(event) {
        let target = event.target;
        let parentFound = false;
        while (target !== null && !parentFound) {
            if (target === this._elf.nativeElement) {
                parentFound = true;
            }
            target = target.parentElement;
        }
        return parentFound;
    }
    toConsumableArray(arr) {
        if (Array.isArray(arr)) {
            const arr2 = Array(arr.length);
            for (let i = 0; i < arr.length; i++) {
                arr2[i] = arr[i];
            }
            return arr2;
        }
    }
    ngOnInit() {
        const self = this;
        this._elf.nativeElement.addEventListener('mousedown', this.mouseDown, false);
        this._handleOffsetX = this._elf.nativeElement.getBoundingClientRect().x;
        this.left = this.calcOffset(this._value);
        this._minBound = this._minBound === undefined ? this._min : this._minBound;
        this._maxBound = this._maxBound === undefined ? this._max : this._maxBound;
    }
    ngOnDestroy() {
        document.removeEventListener('mousemove', this.mouseMove, false);
        document.removeEventListener('mouseup', this.mouseUp, false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderHandleComponent, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SliderHandleComponent, selector: "SliderHandle, nzm-slider-handle", inputs: { min: "min", max: "max", minBound: "minBound", maxBound: "maxBound", step: "step", value: "value", disabled: "disabled", sliderLength: "sliderLength", sliderStart: "sliderStart", handleStyle: "handleStyle" }, outputs: { onChange: "onChange", onAfterChange: "onAfterChange" }, host: { listeners: { "touchstart": "panstart($event)", "touchmove": "panmove($event)", "touchend": "panend($event)" } }, ngImport: i0, template: "<div role=\"slider\" class=\"am-slider-handle\" [ngStyle]=\"handleStyle\" [style.left.%]=\"left\"></div>\n", dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderHandleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'SliderHandle, nzm-slider-handle', encapsulation: ViewEncapsulation.None, template: "<div role=\"slider\" class=\"am-slider-handle\" [ngStyle]=\"handleStyle\" [style.left.%]=\"left\"></div>\n" }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DomSanitizer }], propDecorators: { min: [{
                type: Input
            }], max: [{
                type: Input
            }], minBound: [{
                type: Input
            }], maxBound: [{
                type: Input
            }], step: [{
                type: Input
            }], value: [{
                type: Input
            }], disabled: [{
                type: Input
            }], sliderLength: [{
                type: Input
            }], sliderStart: [{
                type: Input
            }], handleStyle: [{
                type: Input
            }], onChange: [{
                type: Output
            }], onAfterChange: [{
                type: Output
            }], panstart: [{
                type: HostListener,
                args: ['touchstart', ['$event']]
            }], panmove: [{
                type: HostListener,
                args: ['touchmove', ['$event']]
            }], panend: [{
                type: HostListener,
                args: ['touchend', ['$event']]
            }] } });

class SliderMarksComponent {
    set min(value) {
        if (value && value <= this._max) {
            this._min = value;
        }
    }
    set max(value) {
        if (value && value >= this._min) {
            this._max = value;
        }
    }
    set marks(value) {
        this._marks = value;
    }
    set included(value) {
        this._included = value;
    }
    set upperBound(value) {
        if (value && value !== this._upperBound) {
            this._upperBound = value;
            this.setActiveCls();
        }
    }
    set lowerBound(value) {
        if (value && value !== this.lowerBound) {
            this._lowerBound = value;
            this.setActiveCls();
        }
    }
    get class() {
        return this._className;
    }
    constructor(_elf) {
        this._elf = _elf;
        this.markArray = [];
        this._min = 0;
        this._max = 100;
        this._marks = {};
        this._included = true;
        this._className = 'am-slider-mark';
        this.onChange = new EventEmitter();
        this.onAfterChange = new EventEmitter();
    }
    getMarks(marksKeys) {
        this.markArray = [];
        marksKeys
            .map(parseFloat)
            .sort((a, b) => a - b)
            .map(point => {
            const markItem = {
                markLabel: '',
                point: '',
                className: {},
                style: {}
            };
            const markPoint = this._marks[point];
            const markPointIsObject = typeof markPoint === 'object';
            const markLabel = markPointIsObject ? markPoint.label : markPoint;
            if (!markLabel && markLabel !== 0) {
                return null;
            }
            const isActive = (!this._included && point === this._upperBound) ||
                (this._included && point <= this._upperBound && point >= this._lowerBound);
            const markClassName = {
                [`${this._className}-text`]: true,
                [`${this._className}-text-active`]: isActive
            };
            const bottomStyle = {
                marginBottom: '-50%',
                bottom: `${((point - this._min) / this._range) * 100}%`
            };
            const leftStyle = {
                width: `${this._markWidth}%`,
                marginLeft: `${-this._markWidth / 2}%`,
                left: `${((point - this._min) / this._range) * 100}%`
            };
            const style = leftStyle;
            const markStyle = markPointIsObject ? { ...style, ...markPoint.style } : style;
            markItem.markLabel = markLabel;
            markItem.point = point;
            markItem.className = Object.keys(markClassName).join(' ');
            markItem.style = markStyle;
            this.markArray.push(markItem);
        });
    }
    setActiveCls() {
        for (let i = 0; i < this.markArray.length; i++) {
            const point = this.markArray[i].point;
            const isActive = (!this._included && point === this._upperBound) ||
                (this._included && point <= this._upperBound && point >= this._lowerBound);
            this.markArray[i].className = {
                [`${this._className}-text`]: true,
                [`${this._className}-text-active`]: isActive
            };
        }
    }
    setMarksLable() {
        for (let i = 0; i < this.markArray.length; i++) {
            const markEle = this._elf.nativeElement.getElementsByClassName(this._className + '-text')[i];
            markEle.innerHTML = this.markArray[i].markLabel;
        }
    }
    ngOnInit() {
        const marksKeys = Object.keys(this._marks);
        const marksCount = marksKeys.length;
        const unit = marksCount > 1 ? 100 / (marksCount - 1) : 100;
        this._markWidth = unit * 0.9;
        this._range = this._max - this._min;
        this.getMarks(marksKeys);
    }
    ngAfterViewInit() {
        this.setMarksLable();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderMarksComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SliderMarksComponent, selector: "SliderMarks, nzm-slider-marks", inputs: { min: "min", max: "max", marks: "marks", included: "included", upperBound: "upperBound", lowerBound: "lowerBound" }, outputs: { onChange: "onChange", onAfterChange: "onAfterChange" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<span *ngFor=\"let item of markArray\" [ngClass]=\"item.className\" [ngStyle]=\"item.style\"> </span>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderMarksComponent, decorators: [{
            type: Component,
            args: [{ selector: 'SliderMarks, nzm-slider-marks', encapsulation: ViewEncapsulation.None, template: "<span *ngFor=\"let item of markArray\" [ngClass]=\"item.className\" [ngStyle]=\"item.style\"> </span>\n" }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { min: [{
                type: Input
            }], max: [{
                type: Input
            }], marks: [{
                type: Input
            }], included: [{
                type: Input
            }], upperBound: [{
                type: Input
            }], lowerBound: [{
                type: Input
            }], onChange: [{
                type: Output
            }], onAfterChange: [{
                type: Output
            }], class: [{
                type: HostBinding
            }] } });

class SliderStepsComponent {
    set min(value) {
        if (value && value <= this._max) {
            this._min = value;
        }
    }
    set max(value) {
        if (value && value >= this._min) {
            this._max = value;
        }
    }
    set marks(value) {
        this._marks = value;
    }
    set step(value) {
        this._step = value;
    }
    set included(value) {
        this._included = value;
    }
    set dots(value) {
        this._dots = value;
    }
    set upperBound(value) {
        if (value !== undefined && value !== this._upperBound) {
            this._upperBound = value;
            this.setActiveCls();
        }
    }
    set lowerBound(value) {
        if (value !== undefined && value !== this.lowerBound) {
            this._lowerBound = value;
            this.setActiveCls();
        }
    }
    get class() {
        return 'am-slider-step';
    }
    constructor(_elf) {
        this._elf = _elf;
        this.prefixCls = 'am-slider';
        this.stepArray = [];
        this._min = 0;
        this._max = 100;
        this._marks = {};
        this._included = true;
        this._dots = false;
    }
    calPoints() {
        const points = Object.keys(this._marks).map(parseFloat);
        if (this._dots) {
            for (let i = this._min; i <= this._max; i = i + this._step) {
                if (points.indexOf(i) < 0) {
                    points.push(i);
                }
            }
        }
        return points;
    }
    getSteps(points) {
        const range = this._max - this._min;
        this.stepArray = [];
        points.map(point => {
            const stepItem = {
                stepStyle: {},
                stepClass: {},
                point: null
            };
            const offset = `${(Math.abs(point - this._min) / range) * 100}%`;
            const isActived = (!this._included && point === this._upperBound) ||
                (this._included && point <= this._upperBound && point >= this._lowerBound);
            let style = { left: offset, ...this._dotStyle };
            if (isActived) {
                style = { ...style, ...this._activeDotStyle };
            }
            const pointClassName = {
                [`${this.prefixCls}-dot`]: true,
                [`${this.prefixCls}-dot-active`]: isActived
            };
            stepItem.point = point;
            stepItem.stepStyle = style;
            stepItem.stepClass = pointClassName;
            this.stepArray.push(stepItem);
        });
    }
    setActiveCls() {
        for (let i = 0; i < this.stepArray.length; i++) {
            const point = this.stepArray[i].point;
            const isActived = (!this._included && point === this._upperBound) ||
                (this._included && point <= this._upperBound && point >= this._lowerBound);
            this.stepArray[i].stepClass = {
                [`${this.prefixCls}-dot`]: true,
                [`${this.prefixCls}-dot-active`]: isActived
            };
        }
    }
    ngOnInit() {
        const points = this.calPoints();
        this.getSteps(points);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderStepsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SliderStepsComponent, selector: "SliderSteps, nzm-slider-steps", inputs: { min: "min", max: "max", marks: "marks", step: "step", included: "included", dots: "dots", upperBound: "upperBound", lowerBound: "lowerBound" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<span *ngFor=\"let item of stepArray\" [ngClass]=\"item.stepClass\" [ngStyle]=\"item.stepStyle\"> </span>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderStepsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'SliderSteps, nzm-slider-steps', encapsulation: ViewEncapsulation.None, template: "<span *ngFor=\"let item of stepArray\" [ngClass]=\"item.stepClass\" [ngStyle]=\"item.stepStyle\"> </span>\n" }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { min: [{
                type: Input
            }], max: [{
                type: Input
            }], marks: [{
                type: Input
            }], step: [{
                type: Input
            }], included: [{
                type: Input
            }], dots: [{
                type: Input
            }], upperBound: [{
                type: Input
            }], lowerBound: [{
                type: Input
            }], class: [{
                type: HostBinding
            }] } });

class SliderTrackComponent {
    get className() {
        return this._className;
    }
    set className(value) {
        this._className = value;
    }
    get included() {
        return this._included;
    }
    set included(value) {
        this._included = value;
    }
    set offset(value) {
        this._offset = value;
    }
    set length(value) {
        this._length = value;
    }
    set style(value) {
        this._style = value;
    }
    constructor(_elf, _sanitizer) {
        this._elf = _elf;
        this._sanitizer = _sanitizer;
        this.prefixCls = 'am-slider';
        this._included = true;
    }
    ngOnChanges() {
        const positonStyle = {
            left: `${this._offset}%`,
            width: `${this._length}%`
        };
        this.elStyle = {
            ...this._style,
            ...positonStyle
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderTrackComponent, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SliderTrackComponent, selector: "SliderTrack, nzm-slider-track", inputs: { className: "className", included: "included", offset: "offset", length: "length", style: "style" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"included\" [ngClass]=\"className\" [ngStyle]=\"elStyle\"></div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderTrackComponent, decorators: [{
            type: Component,
            args: [{ selector: 'SliderTrack, nzm-slider-track', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"included\" [ngClass]=\"className\" [ngStyle]=\"elStyle\"></div>\n" }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DomSanitizer }], propDecorators: { className: [{
                type: Input
            }], included: [{
                type: Input
            }], offset: [{
                type: Input
            }], length: [{
                type: Input
            }], style: [{
                type: Input
            }] } });

class SliderComponent {
    get min() {
        return this._min;
    }
    set min(value) {
        this._min = value;
    }
    get max() {
        return this._max;
    }
    set max(value) {
        this._max = value;
    }
    get step() {
        return this._step;
    }
    set step(value) {
        this._step = value;
    }
    get value() {
        return this._value;
    }
    set value(value) {
        this.setValue(value);
    }
    set defaultValue(value) {
        this._defaultValue = value;
        this.setValue(value);
    }
    get disabled() {
        return this._disabled;
    }
    set disabled(value) {
        this._disabled = value;
        this.setCls();
    }
    get marks() {
        return this._marks;
    }
    set marks(value) {
        this._marks = value;
    }
    get dots() {
        return this._dots;
    }
    set dots(value) {
        this._dots = value;
    }
    get included() {
        return this._included;
    }
    set included(value) {
        this._included = value;
    }
    get handleStyle() {
        return this._handleStyle;
    }
    set handleStyle(value) {
        this._handleStyle = value;
    }
    get trackStyle() {
        return this._trackStyle;
    }
    set trackStyle(value) {
        this._trackStyle = value;
    }
    get railStyle() {
        return this._railStyle;
    }
    set railStyle(value) {
        this._railStyle = value;
    }
    constructor(_elf) {
        this._elf = _elf;
        this.prefixCls = 'am-slider';
        this.offset = 0;
        this.length = 0;
        this._min = 0;
        this._max = 100;
        this._step = 1;
        this._defaultValue = 0;
        this._disabled = false;
        this._marks = {};
        this._dots = false;
        this._included = true;
        this._trackStyle = {};
        this.onAfterChange = new EventEmitter();
        this.onChange = new EventEmitter();
        this.amSliderWrapper = true;
        this._ngModelOnChange = () => { };
        this._ngModelOnTouched = () => { };
    }
    setCls() {
        this.sliderCls = {
            [`${this.prefixCls}-disabled`]: this._disabled
        };
    }
    handleChange(e) {
        setTimeout(() => {
            this.setTrack(e);
            this._value = e;
        }, 10);
        this.onChange.emit(e);
        this._ngModelOnChange(e);
    }
    handleAfterChange(e) {
        setTimeout(() => {
            this.setTrack(e);
            this._value = e;
        }, 10);
        this.onAfterChange.emit(e);
    }
    valueRange() {
        if (this._value < this._min) {
            this._value = this._min;
        }
        if (this._value > this._max) {
            this._value = this._max;
        }
    }
    ngOnInit() {
        this.setCls();
        this.setValue(this._value);
        const sliderCoords = this._elf.nativeElement.getElementsByClassName('am-slider')[0].getBoundingClientRect();
        this.sliderLength = sliderCoords.width;
        this.sliderStart = sliderCoords.left;
    }
    writeValue(value) {
        this.setValue(value, true);
    }
    setValue(value, isWriteValue = false) {
        if (value === 0 || value) {
            this._value = value;
        }
        else {
            this._value = this._defaultValue;
        }
        this.valueRange();
        this.setTrack(this._value);
        if (isWriteValue) {
            this._ngModelOnChange(this._value);
        }
        else {
            this.onAfterChange.emit(this._value);
        }
    }
    setTrack(e) {
        this.offset = 0;
        this.length = ((e - this._min) * 100) / (this._max - this._min);
    }
    registerOnChange(fn) {
        this._ngModelOnChange = fn;
    }
    registerOnTouched(fn) {
        this._ngModelOnTouched = fn;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SliderComponent, selector: "Slider , nzm-slider", inputs: { min: "min", max: "max", step: "step", value: "value", defaultValue: "defaultValue", disabled: "disabled", marks: "marks", dots: "dots", included: "included", handleStyle: "handleStyle", trackStyle: "trackStyle", railStyle: "railStyle" }, outputs: { onAfterChange: "onAfterChange", onChange: "onChange" }, host: { properties: { "class.am-slider-wrapper": "this.amSliderWrapper" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => SliderComponent),
                multi: true
            }
        ], ngImport: i0, template: "<div class=\"am-slider\" [ngClass]=\"sliderCls\">\n  <div class=\"am-slider-rail\" [ngStyle]=\"railStyle\"></div>\n  <SliderTrack\n    [className]=\"'am-slider-track'\"\n    [style]=\"trackStyle\"\n    [offset]=\"offset\"\n    [length]=\"length\"\n    [included]=\"included\"\n  ></SliderTrack>\n  <SliderSteps\n    [max]=\"max\"\n    [min]=\"min\"\n    [dots]=\"dots\"\n    [step]=\"step\"\n    [marks]=\"marks\"\n    [lowerBound]=\"min\"\n    [upperBound]=\"value\"\n    [included]=\"included\"\n  ></SliderSteps>\n  <SliderHandle\n    [max]=\"max\"\n    [min]=\"min\"\n    [value]=\"value\"\n    [step]=\"step\"\n    [disabled]=\"disabled\"\n    [handleStyle]=\"handleStyle\"\n    [sliderStart]=\"sliderStart\"\n    [sliderLength]=\"sliderLength\"\n    (onChange)=\"handleChange($event)\"\n    (onAfterChange)=\"handleAfterChange($event)\"\n  ></SliderHandle>\n  <SliderMarks\n    [max]=\"max\"\n    [min]=\"min\"\n    [marks]=\"marks\"\n    [lowerBound]=\"min\"\n    [upperBound]=\"value\"\n    [included]=\"included\"\n  ></SliderMarks>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SliderHandleComponent, selector: "SliderHandle, nzm-slider-handle", inputs: ["min", "max", "minBound", "maxBound", "step", "value", "disabled", "sliderLength", "sliderStart", "handleStyle"], outputs: ["onChange", "onAfterChange"] }, { kind: "component", type: SliderMarksComponent, selector: "SliderMarks, nzm-slider-marks", inputs: ["min", "max", "marks", "included", "upperBound", "lowerBound"], outputs: ["onChange", "onAfterChange"] }, { kind: "component", type: SliderStepsComponent, selector: "SliderSteps, nzm-slider-steps", inputs: ["min", "max", "marks", "step", "included", "dots", "upperBound", "lowerBound"] }, { kind: "component", type: SliderTrackComponent, selector: "SliderTrack, nzm-slider-track", inputs: ["className", "included", "offset", "length", "style"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'Slider , nzm-slider', encapsulation: ViewEncapsulation.None, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SliderComponent),
                            multi: true
                        }
                    ], template: "<div class=\"am-slider\" [ngClass]=\"sliderCls\">\n  <div class=\"am-slider-rail\" [ngStyle]=\"railStyle\"></div>\n  <SliderTrack\n    [className]=\"'am-slider-track'\"\n    [style]=\"trackStyle\"\n    [offset]=\"offset\"\n    [length]=\"length\"\n    [included]=\"included\"\n  ></SliderTrack>\n  <SliderSteps\n    [max]=\"max\"\n    [min]=\"min\"\n    [dots]=\"dots\"\n    [step]=\"step\"\n    [marks]=\"marks\"\n    [lowerBound]=\"min\"\n    [upperBound]=\"value\"\n    [included]=\"included\"\n  ></SliderSteps>\n  <SliderHandle\n    [max]=\"max\"\n    [min]=\"min\"\n    [value]=\"value\"\n    [step]=\"step\"\n    [disabled]=\"disabled\"\n    [handleStyle]=\"handleStyle\"\n    [sliderStart]=\"sliderStart\"\n    [sliderLength]=\"sliderLength\"\n    (onChange)=\"handleChange($event)\"\n    (onAfterChange)=\"handleAfterChange($event)\"\n  ></SliderHandle>\n  <SliderMarks\n    [max]=\"max\"\n    [min]=\"min\"\n    [marks]=\"marks\"\n    [lowerBound]=\"min\"\n    [upperBound]=\"value\"\n    [included]=\"included\"\n  ></SliderMarks>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { min: [{
                type: Input
            }], max: [{
                type: Input
            }], step: [{
                type: Input
            }], value: [{
                type: Input
            }], defaultValue: [{
                type: Input
            }], disabled: [{
                type: Input
            }], marks: [{
                type: Input
            }], dots: [{
                type: Input
            }], included: [{
                type: Input
            }], handleStyle: [{
                type: Input
            }], trackStyle: [{
                type: Input
            }], railStyle: [{
                type: Input
            }], onAfterChange: [{
                type: Output
            }], onChange: [{
                type: Output
            }], amSliderWrapper: [{
                type: HostBinding,
                args: ['class.am-slider-wrapper']
            }] } });

class SliderModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: SliderModule, declarations: [SliderComponent,
            SliderHandleComponent,
            SliderMarksComponent,
            SliderStepsComponent,
            SliderTrackComponent], imports: [CommonModule], exports: [SliderComponent, SliderHandleComponent, SliderMarksComponent, SliderStepsComponent, SliderTrackComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SliderModule, decorators: [{
            type: NgModule,
            args: [{
                    exports: [SliderComponent, SliderHandleComponent, SliderMarksComponent, SliderStepsComponent, SliderTrackComponent],
                    declarations: [
                        SliderComponent,
                        SliderHandleComponent,
                        SliderMarksComponent,
                        SliderStepsComponent,
                        SliderTrackComponent
                    ],
                    imports: [CommonModule]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { SliderComponent, SliderHandleComponent, SliderMarksComponent, SliderModule, SliderStepsComponent, SliderTrackComponent };
//# sourceMappingURL=ng-zorro-antd-mobile-slider.mjs.map