@taiga-ui/kit 2.36.0 → 2.38.0

package/bundles/taiga-ui-kit-components-input-slider.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit/abstract'), require('@angular/common'), require('@taiga-ui/kit/components/slider'), require('angular2-text-mask')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-slider', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/abstract', '@angular/common', '@taiga-ui/kit/components/slider', 'angular2-text-mask'], factory) :
-    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].kit = global['taiga-ui'].kit || {}, global['taiga-ui'].kit.components = global['taiga-ui'].kit.components || {}, global['taiga-ui'].kit.components['input-slider'] = {}), global.ng.core, global.ng.forms, global.cdk, global.core$1, global['taiga-ui'].kit.abstract, global.ng.common, global['taiga-ui'].kit.components.slider, global.angular2TextMask));
-}(this, (function (exports, core, forms, cdk, core$1, abstract, common, slider, angular2TextMask) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit/abstract'), require('@taiga-ui/kit/components/input-number'), require('@taiga-ui/kit/components/slider'), require('@taiga-ui/kit/constants'), require('@taiga-ui/kit/tokens'), require('rxjs'), require('@angular/common'), require('@tinkoff/ng-polymorpheus'), require('angular2-text-mask')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-slider', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/abstract', '@taiga-ui/kit/components/input-number', '@taiga-ui/kit/components/slider', '@taiga-ui/kit/constants', '@taiga-ui/kit/tokens', 'rxjs', '@angular/common', '@tinkoff/ng-polymorpheus', 'angular2-text-mask'], factory) :
+    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].kit = global['taiga-ui'].kit || {}, global['taiga-ui'].kit.components = global['taiga-ui'].kit.components || {}, global['taiga-ui'].kit.components['input-slider'] = {}), global.ng.core, global.ng.forms, global.cdk, global.core$1, global['taiga-ui'].kit.abstract, global['taiga-ui'].kit.components['input-number'], global['taiga-ui'].kit.components.slider, global['taiga-ui'].kit.constants, global['taiga-ui'].kit.tokens, global.rxjs, global.ng.common, global.ngPolymorpheus, global.angular2TextMask));
+}(this, (function (exports, core, forms, cdk, core$1, abstract, inputNumber, slider, constants, tokens, rxjs, common, ngPolymorpheus, angular2TextMask) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -223,215 +223,292 @@
         return value;
     }
 
+    /**
+     * Turn on new `InputSlider`'s version.
+     * The new version will behave almost the same as `InputSlider` from the next major release.
+     * @deprecated TODO remove me in v3.0 and make `InputSlider` always "new".
+     */
+    var TuiNewInputSliderDirective = /** @class */ (function () {
+        function TuiNewInputSliderDirective() {
+        }
+        TuiNewInputSliderDirective = __decorate([
+            core.Directive({
+                selector: 'tui-input-slider[new]',
+            })
+        ], TuiNewInputSliderDirective);
+        return TuiNewInputSliderDirective;
+    }());
     // @dynamic
     var TuiInputSliderComponent = /** @class */ (function (_super) {
         __extends(TuiInputSliderComponent, _super);
-        function TuiInputSliderComponent(control, changeDetectorRef, modeDirective, hintController, numberFormat, appearance) {
+        function TuiInputSliderComponent(control, changeDetectorRef, controller, numberFormat, fromToTexts$, isNew) {
             var _this = _super.call(this, control, changeDetectorRef) || this;
-            _this.modeDirective = modeDirective;
-            _this.hintController = hintController;
+            _this.controller = controller;
             _this.numberFormat = numberFormat;
-            _this.appearance = appearance;
+            _this.fromToTexts$ = fromToTexts$;
+            _this.isNew = isNew;
+            _this.min = 0;
+            _this.max = Infinity;
+            _this.quantum = 1;
+            _this.steps = 0;
+            _this.segments = 0;
+            _this.keySteps = null;
+            _this.valueContent = '';
+            _this.prefix = '';
+            _this.postfix = '';
+            /**
+             * @deprecated use `tuiTextfieldSize` instead
+             * TODO delete in v3.0
+             */
+            _this.size = 'l';
+            /**
+             * @deprecated use `tuiTextfieldCustomContent` instead
+             * TODO delete in v3.0
+             */
             _this.secondary = '';
             return _this;
         }
         TuiInputSliderComponent_1 = TuiInputSliderComponent;
         Object.defineProperty(TuiInputSliderComponent.prototype, "nativeFocusableElement", {
             get: function () {
-                return !this.focusableElement || this.computedDisabled
+                var _a;
+                return !((_a = this.inputNumberRef) === null || _a === void 0 ? void 0 : _a.nativeFocusableElement) || this.computedDisabled
                     ? null
-                    : this.focusableElement.nativeElement;
+                    : this.inputNumberRef.nativeFocusableElement;
             },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(TuiInputSliderComponent.prototype, "focused", {
             get: function () {
-                return cdk.isNativeFocused(this.nativeFocusableElement);
+                var _a;
+                return (cdk.isNativeFocused(this.nativeFocusableElement) ||
+                    cdk.isNativeFocused(((_a = this.sliderRef) === null || _a === void 0 ? void 0 : _a.nativeElement) || null));
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiInputSliderComponent.prototype, "hasTooltip", {
+        Object.defineProperty(TuiInputSliderComponent.prototype, "computedSteps", {
             get: function () {
-                return !!this.hintController.content && !this.disabled;
+                return this.steps || (this.max - this.min) / this.quantum;
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiInputSliderComponent.prototype, "showMinLabel", {
+        Object.defineProperty(TuiInputSliderComponent.prototype, "precision", {
             get: function () {
-                return !this.focused && this.value === this.min && !!this.minLabel;
+                return core$1.getFractionPartPadded(this.quantum).length;
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiInputSliderComponent.prototype, "showMaxLabel", {
+        Object.defineProperty(TuiInputSliderComponent.prototype, "decimal", {
             get: function () {
-                return !this.focused && this.value === this.max && !!this.maxLabel;
+                return this.precision ? 'not-zero' : 'never';
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiInputSliderComponent.prototype, "computedValue", {
+        Object.defineProperty(TuiInputSliderComponent.prototype, "computedSize", {
+            /**
+             * TODO remove old property `size` in v3.0
+             */
             get: function () {
-                if (this.focused && this.isInputValueNotFinished) {
-                    return this.inputValue;
+                if (this.isNew) {
+                    cdk.tuiAssert.assert(this.controller.size !== 's', "Size 's' is not supported by this input.");
+                    return this.controller.size === 'l' ? 'l' : 'm';
                 }
-                return this.formattedValue;
+                return this.size;
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiInputSliderComponent.prototype, "showValue", {
+        Object.defineProperty(TuiInputSliderComponent.prototype, "computedValueContent", {
+            /**
+             * @deprecated for backward compatibility
+             * TODO replace by just `this.valueContent` in v3.0
+             */
             get: function () {
-                return !this.showMinLabel && !this.showMaxLabel;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiInputSliderComponent.prototype, "inputValue", {
-            get: function () {
-                return this.focusableElement ? this.focusableElement.nativeElement.value : '';
-            },
-            set: function (value) {
-                if (this.focusableElement) {
-                    this.focusableElement.nativeElement.value = value;
-                }
+                return this.minLabel || this.maxLabel
+                    ? legacyMinMaxLabel(this)
+                    : this.valueContent;
             },
             enumerable: true,
             configurable: true
         });
-        TuiInputSliderComponent.prototype.onMouseDown = function () {
-            if (this.focusableElement) {
-                cdk.setNativeFocused(this.focusableElement.nativeElement);
+        TuiInputSliderComponent.prototype.focusTextInput = function () {
+            var _a;
+            var focusableElement = (_a = this.inputNumberRef) === null || _a === void 0 ? void 0 : _a.nativeFocusableElement;
+            if (focusableElement) {
+                cdk.setNativeFocused(focusableElement);
             }
         };
-        TuiInputSliderComponent.prototype.onKeyDownArrowUp = function (event) {
-            if (this.readOnly) {
-                return;
-            }
-            event.preventDefault();
-            this.processStep(true);
-            this.inputValue = this.formattedValue;
+        TuiInputSliderComponent.prototype.safelyUpdateValue = function (value) {
+            this.updateValue(this.valueGuard(value !== null && value !== void 0 ? value : this.safeCurrentValue));
         };
-        TuiInputSliderComponent.prototype.onKeyDownArrowDown = function (event) {
+        TuiInputSliderComponent.prototype.onVerticalArrowKeyDown = function (coefficient) {
             if (this.readOnly) {
                 return;
             }
-            event.preventDefault();
-            this.processStep(false);
-            this.inputValue = this.formattedValue;
-        };
-        TuiInputSliderComponent.prototype.onFocused = function (focused) {
-            this.updateFocused(focused);
-            if (focused) {
-                return;
+            var value = this.value + coefficient * this.step;
+            if (value !== this.value) {
+                this.safelyUpdateValue(value);
             }
-            var inputValue = core$1.maskedNumberStringToNumber(this.computedValue, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator);
-            var value = isNaN(inputValue) ? this.min : this.valueGuard(inputValue);
-            this.updateValue(value);
-            this.inputValue = this.formattedValue;
+            this.updateTextInputValue(this.valueGuard(value));
         };
-        TuiInputSliderComponent.prototype.onValue = function (value) {
-            var capped = this.capInputValue(value);
-            var postfix = value.slice(-1)[0] === ',' ? ',' : '';
-            if (core$1.maskedMoneyValueIsEmpty(value) || capped === null) {
-                return;
-            }
-            var newValue = this.formatNumber(capped) + postfix;
-            if (value !== newValue) {
-                this.inputValue = newValue;
+        TuiInputSliderComponent.prototype.onFocused = function (focused) {
+            if (!focused && !this.textInputValue) {
+                this.updateTextInputValue(this.safeCurrentValue);
             }
-            this.updateValue(capped);
+            this.updateFocused(focused);
         };
-        TuiInputSliderComponent.prototype.onSliderValue = function (value) {
-            this.updateValue(this.valueGuard(value));
-            this.inputValue = this.formattedValue;
+        TuiInputSliderComponent.prototype.onPressed = function (pressed) {
+            this.updatePressed(pressed);
         };
-        TuiInputSliderComponent.prototype.getFallbackValue = function () {
-            return 0;
+        TuiInputSliderComponent.prototype.onHovered = function (hovered) {
+            this.updateHovered(hovered);
         };
-        Object.defineProperty(TuiInputSliderComponent.prototype, "formattedValue", {
+        Object.defineProperty(TuiInputSliderComponent.prototype, "textInputValue", {
             get: function () {
-                return this.formatNumber(this.value);
+                var _a;
+                return ((_a = this.inputNumberRef) === null || _a === void 0 ? void 0 : _a.nativeValue) || '';
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiInputSliderComponent.prototype, "isInputValueNotFinished", {
-            get: function () {
-                if (this.inputValue === '') {
-                    return true;
-                }
-                var nativeNumberValue = core$1.maskedNumberStringToNumber(this.inputValue, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator);
-                return nativeNumberValue < 0
-                    ? nativeNumberValue > this.max
-                    : nativeNumberValue < this.min;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        TuiInputSliderComponent.prototype.processStep = function (increment) {
-            var value = this.valueGuard(increment ? this.value + this.step : this.value - this.step);
-            if (value !== this.value) {
-                this.updateValue(value);
-            }
+        TuiInputSliderComponent.prototype.getFallbackValue = function () {
+            return 0;
+        };
+        TuiInputSliderComponent.prototype.valueGuard = function (value) {
+            var roundedValue = cdk.round(Math.round(value / this.quantum) * this.quantum, constants.TUI_FLOATING_PRECISION);
+            return cdk.clamp(roundedValue, this.min, this.max);
         };
-        TuiInputSliderComponent.prototype.formatNumber = function (value) {
-            return core$1.formatNumber(value, null, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator);
+        TuiInputSliderComponent.prototype.updateTextInputValue = function (value) {
+            if (this.inputNumberRef) {
+                this.inputNumberRef.nativeValue =
+                    this.inputNumberRef.getFormattedValue(value);
+            }
         };
         var TuiInputSliderComponent_1;
         TuiInputSliderComponent.ctorParameters = function () { return [
             { type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self }, { type: core.Inject, args: [forms.NgControl,] }] },
             { type: core.ChangeDetectorRef, decorators: [{ type: core.Inject, args: [core.ChangeDetectorRef,] }] },
-            { type: core$1.TuiModeDirective, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.TuiModeDirective,] }] },
-            { type: core$1.TuiHintControllerDirective, decorators: [{ type: core.Inject, args: [core$1.TUI_HINT_WATCHED_CONTROLLER,] }] },
+            { type: core$1.TuiTextfieldController, decorators: [{ type: core.Inject, args: [core$1.TUI_TEXTFIELD_WATCHED_CONTROLLER,] }] },
             { type: undefined, decorators: [{ type: core.Inject, args: [core$1.TUI_NUMBER_FORMAT,] }] },
-            { type: String, decorators: [{ type: core.Inject, args: [core$1.TUI_TEXTFIELD_APPEARANCE,] }] }
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [tokens.TUI_FROM_TO_TEXTS,] }] },
+            { type: TuiNewInputSliderDirective, decorators: [{ type: core.Optional }, { type: core.Inject, args: [TuiNewInputSliderDirective,] }] }
         ]; };
         __decorate([
-            core.ViewChild('focusableElement')
-        ], TuiInputSliderComponent.prototype, "focusableElement", void 0);
+            core.ViewChild(inputNumber.TuiInputNumberComponent)
+        ], TuiInputSliderComponent.prototype, "inputNumberRef", void 0);
+        __decorate([
+            core.ViewChild(slider.TuiSliderComponent, { read: core.ElementRef })
+        ], TuiInputSliderComponent.prototype, "sliderRef", void 0);
         __decorate([
             core.Input(),
             cdk.tuiDefaultProp()
-        ], TuiInputSliderComponent.prototype, "secondary", void 0);
+        ], TuiInputSliderComponent.prototype, "min", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputSliderComponent.prototype, "max", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp(quantumAssertion, 'Quantum must be positive')
+        ], TuiInputSliderComponent.prototype, "quantum", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputSliderComponent.prototype, "steps", void 0);
         __decorate([
-            core.HostBinding('class._has-tooltip')
-        ], TuiInputSliderComponent.prototype, "hasTooltip", null);
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputSliderComponent.prototype, "segments", void 0);
         __decorate([
-            core.HostBinding('class._min-label')
-        ], TuiInputSliderComponent.prototype, "showMinLabel", null);
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputSliderComponent.prototype, "keySteps", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputSliderComponent.prototype, "valueContent", void 0);
         __decorate([
-            core.HostBinding('class._max-label')
-        ], TuiInputSliderComponent.prototype, "showMaxLabel", null);
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputSliderComponent.prototype, "prefix", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputSliderComponent.prototype, "postfix", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputSliderComponent.prototype, "size", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputSliderComponent.prototype, "secondary", void 0);
         TuiInputSliderComponent = TuiInputSliderComponent_1 = __decorate([
             core.Component({
                 selector: 'tui-input-slider',
-                template: "<tui-wrapper\n    [appearance]=\"appearance\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"disabled\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered\"\n    [invalid]=\"computedInvalid\"\n>\n    <span\n        *ngIf=\"hasPlaceholder\"\n        automation-id=\"tui-input-slider__placeholder\"\n        class=\"t-placeholder t-placeholder_raised\"\n    >\n        <ng-content></ng-content>\n    </span>\n    <input\n        #focusableElement\n        automation-id=\"tui-input-slider__native\"\n        class=\"t-native\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readOnly\"\n        [tuiInputMode]=\"inputMode\"\n        [tuiFocusable]=\"focusable\"\n        [textMask]=\"quantum | tuiMapper: mask:min\"\n        [ngModel]=\"computedValue\"\n        (ngModelChange)=\"onValue($event)\"\n        (tuiFocusedChange)=\"onFocused($event)\"\n        (tuiHoveredChange)=\"onHovered($event)\"\n        (keydown.arrowUp)=\"onKeyDownArrowUp($event)\"\n        (keydown.arrowDown)=\"onKeyDownArrowDown($event)\"\n    />\n    <div class=\"t-content\">\n        <span *ngIf=\"showValue\" class=\"t-label\">\n            <span class=\"t-value\">{{ computedValue }}</span>\n            <span\n                *ngIf=\"pluralizeMap\"\n                automation-id=\"tui-input-slider__pluralize\"\n            >\n                {{ value | i18nPlural: pluralizeMap }}\n            </span>\n        </span>\n        <span\n            *ngIf=\"showMinLabel\"\n            automation-id=\"tui-input-slider__min-label\"\n            class=\"t-label\"\n        >\n            {{ minLabel }}\n        </span>\n        <span\n            *ngIf=\"showMaxLabel\"\n            automation-id=\"tui-input-slider__max-label\"\n            class=\"t-label\"\n        >\n            {{ maxLabel }}\n        </span>\n        <span automation-id=\"tui-input-slider__secondary\" class=\"t-secondary\">\n            {{ secondary }}\n            <tui-tooltip\n                *ngIf=\"hasTooltip\"\n                automation-id=\"tui-input-slider__tooltip\"\n                describeId=\"placeholer_until_accesibility_is_added\"\n                class=\"t-tooltip\"\n                [content]=\"hintController.content\"\n                [direction]=\"hintController.direction\"\n                [mode]=\"hintController.mode\"\n                [showDelay]=\"hintController.showDelay\"\n                [hideDelay]=\"hintController.hideDelay\"\n                (mousedown.prevent)=\"onMouseDown()\"\n            ></tui-tooltip>\n        </span>\n    </div>\n</tui-wrapper>\n<tui-slider\n    class=\"t-slider\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [steps]=\"computedSteps\"\n    [segments]=\"segments\"\n    [keySteps]=\"keySteps\"\n    [pluralize]=\"segmentsPluralize\"\n    [focusable]=\"false\"\n    [disabled]=\"readOnly || disabled\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onSliderValue($event)\"\n    (mousedown)=\"onMouseDown()\"\n></tui-slider>\n",
+                template: "<tui-input-number\n    [min]=\"min\"\n    [max]=\"max\"\n    [precision]=\"precision\"\n    [decimal]=\"decimal\"\n    [prefix]=\"prefix\"\n    [postfix]=\"postfix || (value | i18nPlural: pluralizeMap || pluralizeMapFallback)\"\n    [tuiTextfieldCustomContent]=\"controller.customContent || deprecatedSecondary\"\n    [tuiTextfieldSize]=\"computedSize\"\n    [tuiTextfieldLabelOutside]=\"computedSize !== 'l'\"\n    [readOnly]=\"readOnly\"\n    [pseudoFocused]=\"computedFocused\"\n    [pseudoHovered]=\"computedHovered\"\n    [pseudoPressed]=\"computedPressed\"\n    [pseudoInvalid]=\"pseudoInvalid\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"safelyUpdateValue($event)\"\n    (focusedChange)=\"onFocused($event)\"\n    (hoveredChange)=\"onHovered($event)\"\n    (pressedChange)=\"onPressed($event)\"\n    (keydown.arrowUp.prevent)=\"onVerticalArrowKeyDown(1)\"\n    (keydown.arrowDown.prevent)=\"onVerticalArrowKeyDown(-1)\"\n>\n    <ng-content></ng-content>\n    <div\n        *ngIf=\"computedValueContent && !focused\"\n        polymorpheus-outlet\n        automation-id=\"tui-input-slider__value-content\"\n        [content]=\"computedValueContent\"\n        [context]=\"{$implicit: value}\"\n    ></div>\n</tui-input-number>\n\n<!--TODO: remove in v3.0-->\n<ng-template #deprecatedSecondary>{{secondary}}</ng-template>\n\n<!--TODO: remove wrapper + ticks labels (leave only slider) in v3.0-->\n<div class=\"t-slider-wrapper\">\n    <input\n        tuiSlider\n        type=\"range\"\n        [tuiFocusable]=\"false\"\n        [max]=\"computedSteps\"\n        [segments]=\"segments\"\n        [keySteps]=\"computedKeySteps\"\n        [attr.disabled]=\"readOnly || disabled || null\"\n        [ngModel]=\"value\"\n        (keyStepsInput)=\"safelyUpdateValue($event)\"\n        (click)=\"focusTextInput()\"\n    />\n\n    <!--TODO delete ticks labels in v3.0-->\n    <div *ngIf=\"segments && !isNew\" class=\"t-ticks-labels\">\n        <span\n            *tuiRepeatTimes=\"let tickIndex of segments + 1\"\n            automation-id=\"tui-slider__segment\"\n        >\n            <span *ngIf=\"fromToTexts$ | async as fromToText\">\n                {{ getTickPrefix(tickIndex, segments, fromToText) }} {{\n                tickIndex | tuiSliderTickLabel:segments:computedKeySteps |\n                tuiFormatNumber}}\n                <span *ngIf=\"segmentsPluralizeMap\">\n                    {{ tickIndex | tuiSliderTickLabel:segments:computedKeySteps\n                    | i18nPlural: segmentsPluralizeMap }}\n                </span>\n            </span>\n        </span>\n    </div>\n</div>\n",
+                host: {
+                    /**
+                     * TODO delete it in v3.0
+                     * Dont forget to clear html-tags
+                     */
+                    '[class._show-ticks-labels]': '!isNew',
+                },
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: [
                     {
                         provide: cdk.TUI_FOCUSABLE_ITEM_ACCESSOR,
                         useExisting: core.forwardRef(function () { return TuiInputSliderComponent_1; }),
                     },
+                    slider.tuiSliderOptionsProvider({ trackColor: 'transparent' }),
                     core$1.HINT_CONTROLLER_PROVIDER,
+                    core$1.TEXTFIELD_CONTROLLER_PROVIDER,
                 ],
-                styles: [":host{position:relative;z-index:0;display:block;font:var(--tui-font-text-m);border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host._segmented{border-bottom:26px solid transparent}.t-native{position:absolute;top:0;left:0;height:100%;padding:0 1rem;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;width:100%;color:var(--tui-text-01);box-sizing:border-box;outline:0}.t-native:-webkit-autofill,.t-native:-webkit-autofill:focus,.t-native:-webkit-autofill:hover{border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 1000px var(--tui-autofill) inset!important}:host._disabled .t-native{color:var(--tui-text-03);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host._max-label .t-native,:host._min-label .t-native{opacity:0}:host[data-size='l'] .t-native{padding:1.25rem 1rem 0}:host[data-mode=onDark] .t-native{color:var(--tui-text-01-night)}:host[data-mode=onDark]._disabled .t-native{color:var(--tui-text-03-night)}.t-content{display:flex;align-items:center;height:var(--tui-height-m);padding:0 1rem;justify-content:space-between}:host[data-size='l'] .t-content{height:var(--tui-height-l);padding:0 1rem}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:.8125rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--tui-text-02);position:absolute;top:0;left:0;width:100%;height:100%;padding:0 var(--tui-padding-l);line-height:var(--tui-height-l);box-sizing:border-box;pointer-events:none}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size='m'] .t-placeholder_raised{font-size:.69rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused)._hovered .t-placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .t-placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused)._hovered .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size='l']._focused._label-outside .t-placeholder,:host[data-size='m']._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size='l'] .t-placeholder{font-size:.9375rem}:host[data-size='l'] .t-placeholder_raised{font-size:.8156rem}:host[data-size='l']._focused:not(._label-outside) .t-placeholder,:host[data-size='m']._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size='l'][data-mode=onDark]._focused:not(._label-outside) .t-placeholder,:host[data-size='m'][data-mode=onDark]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .t-placeholder,:host[data-size='l'][data-mode=onDark]._focused._label-outside .t-placeholder,:host[data-size='m'][data-mode=onDark]._focused._label-outside .t-placeholder{color:var(--tui-text-02-night)}:host._has-tooltip .t-placeholder{max-width:calc(100% - 1.75rem)}.t-value{visibility:hidden}.t-label{overflow:hidden;text-overflow:ellipsis}:host[data-size='l'] .t-label{padding-top:1.25rem}.t-secondary{color:var(--tui-text-01)}:host._disabled .t-secondary{color:var(--tui-text-03)}:host[data-mode=onDark]._disabled .t-secondary{color:var(--tui-text-03-night)}.t-tooltip{margin-left:.75rem}.t-slider{position:absolute;top:100%;left:0;right:0;border-top-left-radius:0;border-top-right-radius:0;margin:-.5625rem 0 0;color:transparent}:host._disabled .t-slider,:host._readonly .t-slider{pointer-events:none}"]
-            }),
+                styles: [":host{position:relative;z-index:0;display:block}:host._segmented._show-ticks-labels{border-bottom:26px solid transparent}.t-slider-wrapper{position:absolute;top:100%;left:calc(var(--tui-radius-m)/ 2);right:0;margin:-.5625rem 0 0}input[type=range]{border-top-left-radius:0;border-bottom-left-radius:calc(var(--tui-radius-m) * 5) calc(var(--tui-radius-m) * 1.5)}.t-ticks-labels{display:flex;margin:0 .5rem;font:var(--tui-font-text-s);color:var(--tui-text-02)}.t-ticks-labels>*{position:relative;flex:2;text-align:center}.t-ticks-labels>:first-child{left:-.5rem;flex:1;text-align:left}.t-ticks-labels>:last-child{right:-.5rem;flex:1;text-align:right}tui-input-slider+.t-ticks-labels{margin-left:calc(var(--tui-radius-m)/ 2 + .5rem)}"]
+            })
+            /**
+             * TODO replace `extends AbstractTuiInputSlider<number>` by `extends AbstractTuiControl<number> implements TuiWithOptionalMinMax<number>`
+             * in v3.0
+             */
+            ,
             __param(0, core.Optional()),
             __param(0, core.Self()),
             __param(0, core.Inject(forms.NgControl)),
             __param(1, core.Inject(core.ChangeDetectorRef)),
-            __param(2, core.Optional()),
-            __param(2, core.Inject(core$1.TuiModeDirective)),
-            __param(3, core.Inject(core$1.TUI_HINT_WATCHED_CONTROLLER)),
-            __param(4, core.Inject(core$1.TUI_NUMBER_FORMAT)),
-            __param(5, core.Inject(core$1.TUI_TEXTFIELD_APPEARANCE))
+            __param(2, core.Inject(core$1.TUI_TEXTFIELD_WATCHED_CONTROLLER)),
+            __param(3, core.Inject(core$1.TUI_NUMBER_FORMAT)),
+            __param(4, core.Inject(tokens.TUI_FROM_TO_TEXTS)),
+            __param(5, core.Optional()),
+            __param(5, core.Inject(TuiNewInputSliderDirective))
         ], TuiInputSliderComponent);
         return TuiInputSliderComponent;
     }(abstract.AbstractTuiInputSlider));
+    function quantumAssertion(quantum) {
+        return quantum > 0;
+    }
+    /**
+     * @deprecated helper for backward compatibility.
+     * TODO remove in v3.0
+     */
+    function legacyMinMaxLabel(_a) {
+        var min = _a.min, max = _a.max, minLabel = _a.minLabel, maxLabel = _a.maxLabel;
+        return function (_a) {
+            var value = _a.$implicit;
+            switch (value) {
+                case min:
+                    return minLabel || value;
+                case max:
+                    return maxLabel || value;
+                default:
+                    return value;
+            }
+        };
+    }
 
     var TuiInputSliderModule = /** @class */ (function () {
         function TuiInputSliderModule() {
@@ -452,9 +529,14 @@
                     core$1.TuiTooltipModule,
                     slider.TuiSliderModule,
                     core$1.TuiWrapperModule,
+                    core$1.TuiFormatNumberPipeModule,
+                    cdk.TuiRepeatTimesModule,
+                    ngPolymorpheus.PolymorpheusModule,
+                    inputNumber.TuiInputNumberModule,
+                    core$1.TuiTextfieldControllerModule,
                 ],
-                declarations: [TuiInputSliderComponent],
-                exports: [TuiInputSliderComponent],
+                declarations: [TuiInputSliderComponent, TuiNewInputSliderDirective],
+                exports: [TuiInputSliderComponent, TuiNewInputSliderDirective],
             })
         ], TuiInputSliderModule);
         return TuiInputSliderModule;
@@ -462,6 +544,7 @@
 
     exports.TuiInputSliderComponent = TuiInputSliderComponent;
     exports.TuiInputSliderModule = TuiInputSliderModule;
+    exports.TuiNewInputSliderDirective = TuiNewInputSliderDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });