@progress/kendo-angular-inputs 7.5.2 → 7.5.3

package/dist/fesm2015/index.js

@@ -113,15 +113,6 @@ const remainder = (dividend, divisor) => {
  * @hidden
  */
 const calculateFixedTrackSize = ({ max, min, smallStep, fixedTickWidth }) => ((max - min) / smallStep) * fixedTickWidth;
-/**
- * @hidden
- */
-const calculateTrackSize = (wrapperWidth, offset, showButtons = true) => {
-    const BUTTONS_COUNT = 2;
-    const trackOffset = showButtons ? parseFloat(offset) * BUTTONS_COUNT : 0;
-    const trackWidth = wrapperWidth - trackOffset;
-    return Math.floor(trackWidth);
-};
 /**
  * @hidden
  */
@@ -144,14 +135,13 @@ const calculateValueFromTick = (index, { max, min, smallStep, reverse, vertical
 /**
  * @hidden
  */
-const calculateHandlePosition = ({ handleWidth, trackWidth, min, max, reverse, value }) => {
-    const halfHandleWidth = Math.floor(handleWidth / 2);
+const calculateHandlePosition = ({ trackWidth, min, max, reverse, value }) => {
     const step = trackWidth / Math.abs(max - min);
     let pos = isPresent(value) ? step * (value - min) : min;
     if (reverse) {
         pos = trackWidth - pos;
     }
-    return Math.floor(pos - halfHandleWidth);
+    return Math.floor(pos);
 };
 /**
  * @hidden
@@ -314,8 +304,10 @@ class SliderModelBase {
     }
     resizeTrack() {
         const orientation = this.props.vertical ? 'height' : 'width';
+        const altOrientation = this.props.vertical ? 'width' : 'height';
         const trackWidth = this.trackWidth();
-        this.track.style[orientation] = `${trackWidth}px`;
+        this.track.parentElement.style[orientation] = `${trackWidth}px`;
+        this.track.parentElement.style[altOrientation] = '';
     }
     resizeTicks(ticksContainer, ticks) {
         const dimension = this.props.vertical ? "height" : "width";
@@ -326,22 +318,17 @@ class SliderModelBase {
     }
     resizeWrapper() {
         const dimension = this.props.vertical ? "height" : "width";
-        const wrapperSize = this.elementSize(this.wrapper);
-        const trackWidth = calculateTrackSize(wrapperSize, this.elementOffset(this.track));
         const fixedTrackWidth = calculateFixedTrackSize(this.props);
         const wrapperParentEl = this.wrapper.parentElement;
-        if (trackWidth > fixedTrackWidth) {
-            wrapperParentEl.style[dimension] = `${wrapperSize - (trackWidth - fixedTrackWidth)}px`;
-        }
-        else {
-            wrapperParentEl.style[dimension] = `${wrapperSize + (fixedTrackWidth - trackWidth)}px`;
+        if (fixedTrackWidth) {
+            wrapperParentEl.style[dimension] = "auto";
         }
     }
     trackWidth() {
         if (this.props.fixedTickWidth) {
             return calculateFixedTrackSize(this.props);
         }
-        return calculateTrackSize(this.elementSize(this.wrapper), this.elementOffset(this.track), this.props.buttons);
+        return this.elementSize(this.track.parentElement);
     }
     getTickSizes() {
         const { min, max, smallStep } = this.props;
@@ -403,16 +390,14 @@ class SliderModel extends SliderModelBase {
             max,
             reverse,
             value,
-            trackWidth,
-            handleWidth: dragHandle.offsetWidth
+            trackWidth
         });
         this.renderer.setStyle(dragHandle, position, `${this.handlePosition}px`);
     }
-    positionSelection(dragHandle, selection) {
+    positionSelection(selection) {
         const { reverse, vertical } = this.props;
         const dimension = vertical ? 'height' : 'width';
-        const handleWidth = Math.floor(dragHandle.offsetWidth / 2);
-        let size = this.handlePosition + handleWidth;
+        let size = this.handlePosition;
         if (reverse) {
             size = this.trackWidth() - size;
         }
@@ -459,7 +444,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637576485,
+    publishDate: 1642518309,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -1031,7 +1016,7 @@ let SliderComponent = SliderComponent_1 = class SliderComponent extends SliderBa
             model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(element => element.nativeElement));
         }
         model.positionHandle(dragHandleEl);
-        model.positionSelection(dragHandleEl, selectionEl);
+        model.positionSelection(selectionEl);
         if (!animate) {
             this.hostElement.nativeElement.getBoundingClientRect();
             this.renderer.addClass(this.hostElement.nativeElement, 'k-slider-transitions');
@@ -1209,69 +1194,66 @@ SliderComponent = SliderComponent_1 = __decorate([
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <span
-                #decreaseButton
-                *ngIf="showButtons"
-                class="k-button k-button-decrease"
+            <button *ngIf="showButtons" type="button" #decreaseButton
+                class="k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
                 [title]="decrementMessage"
-                role="presentation"
-            >
-                <span class="k-icon"
-                    [class.k-i-arrow-w]="!vertical"
-                    [class.k-i-arrow-s]="vertical"
+                [attr.tabindex]="-1"
+                role="presentation">
+                    <span class="k-button-icon k-icon"
+                        [class.k-i-arrow-w]="!vertical"
+                        [class.k-i-arrow-s]="vertical">
+                    </span>
+            </button>
+            <div class="k-slider-track-wrap">
+                <ul kendoSliderTicks
+                    #ticks
+                    *ngIf="tickPlacement !== 'none'"
+                    [tickTitle]="title"
+                    [vertical]="vertical"
+                    [step]="smallStep"
+                    [largeStep]="largeStep"
+                    [min]="min"
+                    [max]="max"
+                    [labelTemplate]="labelTemplate?.templateRef"
+                    [attr.aria-hidden]="true"
                 >
-                </span>
-            </span>
-            <span
-                *ngIf="showButtons"
-                #increaseButton
-                class="k-button k-button-increase"
+                </ul>
+                <div #track class="k-slider-track">
+                    <div #sliderSelection class="k-slider-selection">
+                    </div>
+                    <a #draghandle
+                        role="slider"
+                        [attr.aria-valuemin]="min"
+                        [attr.aria-valuemax]="max"
+                        [attr.aria-valuenow]="currentValue"
+                        [attr.aria-valuetext]="currentValue"
+                        [attr.aria-disabled]="disabled ? true : undefined"
+                        [attr.aria-readonly]="readonly ? true : undefined"
+                        [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                        [style.touch-action]="isDisabled ? '' : 'none'"
+                        class="k-draghandle"
+                        [title]="dragHandleMessage"
+                        [attr.tabindex]="disabled ? '-1' : tabIndex"
+                        [id]="focusableId"
+                        kendoDraggable
+                        (kendoPress)="ifEnabled(handleDragPress, $event)"
+                        (kendoDrag)="ifEnabled(onHandleDrag, $event)"
+                        (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+                    ></a>
+                </div>
+            </div>
+            <button *ngIf="showButtons" type="button" #increaseButton
+                class="k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
                 [title]="incrementMessage"
                 (click)="$event.preventDefault()"
+                [attr.tabindex]="-1"
                 [attr.aria-label]="currentValue"
-            >
-                <span class="k-icon"
-                    [class.k-i-arrow-e]="!vertical"
-                    [class.k-i-arrow-n]="vertical"
-                >
-                </span>
-            </span>
-            <ul kendoSliderTicks
-                #ticks
-                *ngIf="tickPlacement !== 'none'"
-                [tickTitle]="title"
-                [vertical]="vertical"
-                [step]="smallStep"
-                [largeStep]="largeStep"
-                [min]="min"
-                [max]="max"
-                [labelTemplate]="labelTemplate?.templateRef"
-                [attr.aria-hidden]="true"
-            >
-            </ul>
-            <div #track class="k-slider-track">
-                <div #sliderSelection class="k-slider-selection">
-                </div>
-                <a #draghandle
-                    role="slider"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="currentValue"
-                    [attr.aria-valuetext]="currentValue"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle"
-                    [title]="dragHandleMessage"
-                    [attr.tabindex]="disabled ? '-1' : tabIndex"
-                    [id]="focusableId"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress, $event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag, $event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></a>
-            </div>
+                role="presentation">
+                    <span class="k-button-icon k-icon"
+                        [class.k-i-arrow-e]="!vertical"
+                        [class.k-i-arrow-n]="vertical">
+                    </span>
+            </button>
             <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
         </div>
   `
@@ -1303,8 +1285,7 @@ class RangeSliderModel extends SliderModelBase {
                 max,
                 reverse,
                 value,
-                trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth
             });
             this.renderer.setStyle(dragHandle, position, `${this.startHandlePosition}px`);
         }
@@ -1314,8 +1295,7 @@ class RangeSliderModel extends SliderModelBase {
                 max,
                 reverse,
                 value,
-                trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth
             });
             this.renderer.setStyle(dragHandle, position, `${this.endHandlePosition}px`);
         }
@@ -1324,12 +1304,11 @@ class RangeSliderModel extends SliderModelBase {
         const { reverse, vertical } = this.props;
         const dimension = vertical ? 'height' : 'width';
         const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
-        const handleWidth = Math.floor(dragHandle.offsetWidth / 2);
         const size = Math.abs(this.endHandlePosition - this.startHandlePosition);
         const currentSelectionPosition = vertical ? dragHandle.style.bottom : dragHandle.style.left;
         this.renderer.setStyle(selection, dimension, `${size}px`);
-        this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) - handleWidth + 'px'
-            : parseFloat(currentSelectionPosition) + handleWidth + 'px');
+        this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) + 'px'
+            : parseFloat(currentSelectionPosition) + 'px');
     }
 }
 
@@ -1762,62 +1741,63 @@ RangeSliderComponent = RangeSliderComponent_1 = __decorate([
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <ul kendoSliderTicks
-                #ticks
-                *ngIf="tickPlacement !== 'none'"
-                [tickTitle]="title"
-                [vertical]="vertical"
-                [step]="smallStep"
-                [largeStep]="largeStep"
-                [min]="min"
-                [max]="max"
-                [labelTemplate]="labelTemplate?.templateRef"
-                [attr.aria-hidden]="true"
-            >
-            </ul>
-            <div #track class="k-slider-track">
-                <div #sliderSelection class="k-slider-selection">
+            <div class="k-slider-track-wrap">
+                <ul kendoSliderTicks
+                    #ticks
+                    *ngIf="tickPlacement !== 'none'"
+                    [tickTitle]="title"
+                    [vertical]="vertical"
+                    [step]="smallStep"
+                    [largeStep]="largeStep"
+                    [min]="min"
+                    [max]="max"
+                    [labelTemplate]="labelTemplate?.templateRef"
+                    [attr.aria-hidden]="true"
+                >
+                </ul>
+                <div #track class="k-slider-track">
+                    <div #sliderSelection class="k-slider-selection">
+                    </div>
+                    <a #draghandleStart
+                        role="slider"
+                        [id]="startHandleId"
+                        [attr.tabindex]="disabled ? undefined : tabindex"
+                        [attr.aria-valuemin]="min"
+                        [attr.aria-valuemax]="max"
+                        [attr.aria-valuenow]="value ? value[0] : null"
+                        [attr.aria-valuetext]="valueText"
+                        [attr.aria-disabled]="disabled ? true : undefined"
+                        [attr.aria-readonly]="readonly ? true : undefined"
+                        [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                        [style.touch-action]="isDisabled ? '' : 'none'"
+                        class="k-draghandle"
+                        [title]="textFor('dragHandleStart')"
+                        kendoDraggable
+                        (kendoPress)="ifEnabled(handleDragPress ,$event)"
+                        (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
+                        (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+                    ></a>
+                    <a #draghandleEnd
+                        role="slider"
+                        [id]="endHandleId"
+                        [attr.tabindex]="disabled ? undefined : tabindex"
+                        [attr.aria-valuemin]="min"
+                        [attr.aria-valuemax]="max"
+                        [attr.aria-valuenow]="value ? value[1] : null"
+                        [attr.aria-valuetext]="valueText"
+                        [attr.aria-disabled]="disabled ? true : undefined"
+                        [attr.aria-readonly]="readonly ? true : undefined"
+                        [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                        [style.touch-action]="isDisabled ? '' : 'none'"
+                        class="k-draghandle"
+                        [title]="textFor('dragHandleEnd')"
+                        kendoDraggable
+                        (kendoPress)="ifEnabled(handleDragPress ,$event)"
+                        (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
+                        (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+                    ></a>
                 </div>
-                <a #draghandleStart
-                    role="slider"
-                    [id]="startHandleId"
-                    [attr.tabindex]="disabled ? undefined : tabindex"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="value ? value[0] : null"
-                    [attr.aria-valuetext]="valueText"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle"
-                    [title]="textFor('dragHandleStart')"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress ,$event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></a>
-                <a #draghandleEnd
-                    role="slider"
-                    [id]="endHandleId"
-                    [attr.tabindex]="disabled ? undefined : tabindex"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="value ? value[1] : null"
-                    [attr.aria-valuetext]="valueText"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle"
-                    [title]="textFor('dragHandleEnd')"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress ,$event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></a>
             </div>
-
             <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
         </div>
   `
@@ -4992,8 +4972,10 @@ class SliderTick {
  * @hidden
  */
 let SliderTicksComponent = class SliderTicksComponent {
-    constructor(rtl) {
-        this.rtl = rtl;
+    /**
+     * @hidden
+     */
+    constructor() {
         this.wrapperClasses = 'k-reset k-slider-items';
         this.ticks = [];
     }
@@ -5016,9 +4998,6 @@ let SliderTicksComponent = class SliderTicksComponent {
                 result[i].classes['k-tick-large'] = true;
             }
         }
-        if (this.rtl || this.vertical) {
-            result = result.reverse();
-        }
         if (result.length > 0) {
             Object.assign(result[0].classes, this.endTickClasses(true));
             Object.assign(result[result.length - 1].classes, this.endTickClasses(false));
@@ -5090,9 +5069,7 @@ SliderTicksComponent = __decorate([
         {{ tickTitle(value) }}
      </ng-template>
   `
-    }),
-    __param(0, Optional()), __param(0, Inject(RTL)),
-    __metadata("design:paramtypes", [Boolean])
+    })
 ], SliderTicksComponent);
 
 /**

package/dist/fesm5/index.js

@@ -118,16 +118,6 @@ var calculateFixedTrackSize = function (_a) {
     var max = _a.max, min = _a.min, smallStep = _a.smallStep, fixedTickWidth = _a.fixedTickWidth;
     return ((max - min) / smallStep) * fixedTickWidth;
 };
-/**
- * @hidden
- */
-var calculateTrackSize = function (wrapperWidth, offset, showButtons) {
-    if (showButtons === void 0) { showButtons = true; }
-    var BUTTONS_COUNT = 2;
-    var trackOffset = showButtons ? parseFloat(offset) * BUTTONS_COUNT : 0;
-    var trackWidth = wrapperWidth - trackOffset;
-    return Math.floor(trackWidth);
-};
 /**
  * @hidden
  */
@@ -155,14 +145,13 @@ var calculateValueFromTick = function (index, _a) {
  * @hidden
  */
 var calculateHandlePosition = function (_a) {
-    var handleWidth = _a.handleWidth, trackWidth = _a.trackWidth, min = _a.min, max = _a.max, reverse = _a.reverse, value = _a.value;
-    var halfHandleWidth = Math.floor(handleWidth / 2);
+    var trackWidth = _a.trackWidth, min = _a.min, max = _a.max, reverse = _a.reverse, value = _a.value;
     var step = trackWidth / Math.abs(max - min);
     var pos = isPresent(value) ? step * (value - min) : min;
     if (reverse) {
         pos = trackWidth - pos;
     }
-    return Math.floor(pos - halfHandleWidth);
+    return Math.floor(pos);
 };
 /**
  * @hidden
@@ -331,8 +320,10 @@ var SliderModelBase = /** @class */ (function () {
     }
     SliderModelBase.prototype.resizeTrack = function () {
         var orientation = this.props.vertical ? 'height' : 'width';
+        var altOrientation = this.props.vertical ? 'width' : 'height';
         var trackWidth = this.trackWidth();
-        this.track.style[orientation] = trackWidth + "px";
+        this.track.parentElement.style[orientation] = trackWidth + "px";
+        this.track.parentElement.style[altOrientation] = '';
     };
     SliderModelBase.prototype.resizeTicks = function (ticksContainer, ticks) {
         var _this = this;
@@ -344,22 +335,17 @@ var SliderModelBase = /** @class */ (function () {
     };
     SliderModelBase.prototype.resizeWrapper = function () {
         var dimension = this.props.vertical ? "height" : "width";
-        var wrapperSize = this.elementSize(this.wrapper);
-        var trackWidth = calculateTrackSize(wrapperSize, this.elementOffset(this.track));
         var fixedTrackWidth = calculateFixedTrackSize(this.props);
         var wrapperParentEl = this.wrapper.parentElement;
-        if (trackWidth > fixedTrackWidth) {
-            wrapperParentEl.style[dimension] = wrapperSize - (trackWidth - fixedTrackWidth) + "px";
-        }
-        else {
-            wrapperParentEl.style[dimension] = wrapperSize + (fixedTrackWidth - trackWidth) + "px";
+        if (fixedTrackWidth) {
+            wrapperParentEl.style[dimension] = "auto";
         }
     };
     SliderModelBase.prototype.trackWidth = function () {
         if (this.props.fixedTickWidth) {
             return calculateFixedTrackSize(this.props);
         }
-        return calculateTrackSize(this.elementSize(this.wrapper), this.elementOffset(this.track), this.props.buttons);
+        return this.elementSize(this.track.parentElement);
     };
     SliderModelBase.prototype.getTickSizes = function () {
         var _a = this.props, min = _a.min, max = _a.max, smallStep = _a.smallStep;
@@ -426,16 +412,14 @@ var SliderModel = /** @class */ (function (_super) {
             max: max,
             reverse: reverse,
             value: value,
-            trackWidth: trackWidth,
-            handleWidth: dragHandle.offsetWidth
+            trackWidth: trackWidth
         });
         this.renderer.setStyle(dragHandle, position, this.handlePosition + "px");
     };
-    SliderModel.prototype.positionSelection = function (dragHandle, selection) {
+    SliderModel.prototype.positionSelection = function (selection) {
         var _a = this.props, reverse = _a.reverse, vertical = _a.vertical;
         var dimension = vertical ? 'height' : 'width';
-        var handleWidth = Math.floor(dragHandle.offsetWidth / 2);
-        var size = this.handlePosition + handleWidth;
+        var size = this.handlePosition;
         if (reverse) {
             size = this.trackWidth() - size;
         }
@@ -493,7 +477,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637576485,
+    publishDate: 1642518309,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -1127,7 +1111,7 @@ var SliderComponent = /** @class */ (function (_super) {
             model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(function (element) { return element.nativeElement; }));
         }
         model.positionHandle(dragHandleEl);
-        model.positionSelection(dragHandleEl, selectionEl);
+        model.positionSelection(selectionEl);
         if (!animate) {
             this.hostElement.nativeElement.getBoundingClientRect();
             this.renderer.addClass(this.hostElement.nativeElement, 'k-slider-transitions');
@@ -1302,7 +1286,7 @@ var SliderComponent = /** @class */ (function (_super) {
                 { provide: KendoInput, useExisting: forwardRef(function () { return SliderComponent_1; }) }
             ],
             selector: 'kendo-slider',
-            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n            increment=\"increment\"\n            i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n            decrement=\"decrement\"\n            i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n            dragHandle=\"Drag\"\n        >\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-buttons]=\"showButtons\"\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <span\n                #decreaseButton\n                *ngIf=\"showButtons\"\n                class=\"k-button k-button-decrease\"\n                [title]=\"decrementMessage\"\n                role=\"presentation\"\n            >\n                <span class=\"k-icon\"\n                    [class.k-i-arrow-w]=\"!vertical\"\n                    [class.k-i-arrow-s]=\"vertical\"\n                >\n                </span>\n            </span>\n            <span\n                *ngIf=\"showButtons\"\n                #increaseButton\n                class=\"k-button k-button-increase\"\n                [title]=\"incrementMessage\"\n                (click)=\"$event.preventDefault()\"\n                [attr.aria-label]=\"currentValue\"\n            >\n                <span class=\"k-icon\"\n                    [class.k-i-arrow-e]=\"!vertical\"\n                    [class.k-i-arrow-n]=\"vertical\"\n                >\n                </span>\n            </span>\n            <ul kendoSliderTicks\n                #ticks\n                *ngIf=\"tickPlacement !== 'none'\"\n                [tickTitle]=\"title\"\n                [vertical]=\"vertical\"\n                [step]=\"smallStep\"\n                [largeStep]=\"largeStep\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [labelTemplate]=\"labelTemplate?.templateRef\"\n                [attr.aria-hidden]=\"true\"\n            >\n            </ul>\n            <div #track class=\"k-slider-track\">\n                <div #sliderSelection class=\"k-slider-selection\">\n                </div>\n                <a #draghandle\n                    role=\"slider\"\n                    [attr.aria-valuemin]=\"min\"\n                    [attr.aria-valuemax]=\"max\"\n                    [attr.aria-valuenow]=\"currentValue\"\n                    [attr.aria-valuetext]=\"currentValue\"\n                    [attr.aria-disabled]=\"disabled ? true : undefined\"\n                    [attr.aria-readonly]=\"readonly ? true : undefined\"\n                    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                    [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                    class=\"k-draghandle\"\n                    [title]=\"dragHandleMessage\"\n                    [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n                    [id]=\"focusableId\"\n                    kendoDraggable\n                    (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n                    (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n                    (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                ></a>\n            </div>\n            <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n        </div>\n  "
+            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n            increment=\"increment\"\n            i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n            decrement=\"decrement\"\n            i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n            dragHandle=\"Drag\"\n        >\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-buttons]=\"showButtons\"\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <button *ngIf=\"showButtons\" type=\"button\" #decreaseButton\n                class=\"k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button\"\n                [title]=\"decrementMessage\"\n                [attr.tabindex]=\"-1\"\n                role=\"presentation\">\n                    <span class=\"k-button-icon k-icon\"\n                        [class.k-i-arrow-w]=\"!vertical\"\n                        [class.k-i-arrow-s]=\"vertical\">\n                    </span>\n            </button>\n            <div class=\"k-slider-track-wrap\">\n                <ul kendoSliderTicks\n                    #ticks\n                    *ngIf=\"tickPlacement !== 'none'\"\n                    [tickTitle]=\"title\"\n                    [vertical]=\"vertical\"\n                    [step]=\"smallStep\"\n                    [largeStep]=\"largeStep\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [labelTemplate]=\"labelTemplate?.templateRef\"\n                    [attr.aria-hidden]=\"true\"\n                >\n                </ul>\n                <div #track class=\"k-slider-track\">\n                    <div #sliderSelection class=\"k-slider-selection\">\n                    </div>\n                    <a #draghandle\n                        role=\"slider\"\n                        [attr.aria-valuemin]=\"min\"\n                        [attr.aria-valuemax]=\"max\"\n                        [attr.aria-valuenow]=\"currentValue\"\n                        [attr.aria-valuetext]=\"currentValue\"\n                        [attr.aria-disabled]=\"disabled ? true : undefined\"\n                        [attr.aria-readonly]=\"readonly ? true : undefined\"\n                        [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                        [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                        class=\"k-draghandle\"\n                        [title]=\"dragHandleMessage\"\n                        [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n                        [id]=\"focusableId\"\n                        kendoDraggable\n                        (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n                        (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n                        (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                    ></a>\n                </div>\n            </div>\n            <button *ngIf=\"showButtons\" type=\"button\" #increaseButton\n                class=\"k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button\"\n                [title]=\"incrementMessage\"\n                (click)=\"$event.preventDefault()\"\n                [attr.tabindex]=\"-1\"\n                [attr.aria-label]=\"currentValue\"\n                role=\"presentation\">\n                    <span class=\"k-button-icon k-icon\"\n                        [class.k-i-arrow-e]=\"!vertical\"\n                        [class.k-i-arrow-n]=\"vertical\">\n                    </span>\n            </button>\n            <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n        </div>\n  "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             Injector,
@@ -1337,8 +1321,7 @@ var RangeSliderModel = /** @class */ (function (_super) {
                 max: max,
                 reverse: reverse,
                 value: value,
-                trackWidth: trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth: trackWidth
             });
             this.renderer.setStyle(dragHandle, position, this.startHandlePosition + "px");
         }
@@ -1348,8 +1331,7 @@ var RangeSliderModel = /** @class */ (function (_super) {
                 max: max,
                 reverse: reverse,
                 value: value,
-                trackWidth: trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth: trackWidth
             });
             this.renderer.setStyle(dragHandle, position, this.endHandlePosition + "px");
         }
@@ -1358,12 +1340,11 @@ var RangeSliderModel = /** @class */ (function (_super) {
         var _a = this.props, reverse = _a.reverse, vertical = _a.vertical;
         var dimension = vertical ? 'height' : 'width';
         var position = vertical ? 'bottom' : reverse ? 'right' : 'left';
-        var handleWidth = Math.floor(dragHandle.offsetWidth / 2);
         var size = Math.abs(this.endHandlePosition - this.startHandlePosition);
         var currentSelectionPosition = vertical ? dragHandle.style.bottom : dragHandle.style.left;
         this.renderer.setStyle(selection, dimension, size + "px");
-        this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) - handleWidth + 'px'
-            : parseFloat(currentSelectionPosition) + handleWidth + 'px');
+        this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) + 'px'
+            : parseFloat(currentSelectionPosition) + 'px');
     };
     return RangeSliderModel;
 }(SliderModelBase));
@@ -1807,7 +1788,7 @@ var RangeSliderComponent = /** @class */ (function (_super) {
                 { provide: KendoInput, useExisting: forwardRef(function () { return RangeSliderComponent_1; }) }
             ],
             selector: 'kendo-rangeslider',
-            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-dragHandleStart=\"kendo.rangeslider.dragHandleStart|The title of the **Start** drag handle of the Slider.\"\n            dragHandleStart=\"Drag\"\n            i18n-dragHandleEnd=\"kendo.rangeslider.dragHandleEnd|The title of the **End** drag handle of the Slider.\"\n            dragHandleEnd=\"Drag\"\n        >\n\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <ul kendoSliderTicks\n                #ticks\n                *ngIf=\"tickPlacement !== 'none'\"\n                [tickTitle]=\"title\"\n                [vertical]=\"vertical\"\n                [step]=\"smallStep\"\n                [largeStep]=\"largeStep\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [labelTemplate]=\"labelTemplate?.templateRef\"\n                [attr.aria-hidden]=\"true\"\n            >\n            </ul>\n            <div #track class=\"k-slider-track\">\n                <div #sliderSelection class=\"k-slider-selection\">\n                </div>\n                <a #draghandleStart\n                    role=\"slider\"\n                    [id]=\"startHandleId\"\n                    [attr.tabindex]=\"disabled ? undefined : tabindex\"\n                    [attr.aria-valuemin]=\"min\"\n                    [attr.aria-valuemax]=\"max\"\n                    [attr.aria-valuenow]=\"value ? value[0] : null\"\n                    [attr.aria-valuetext]=\"valueText\"\n                    [attr.aria-disabled]=\"disabled ? true : undefined\"\n                    [attr.aria-readonly]=\"readonly ? true : undefined\"\n                    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                    [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                    class=\"k-draghandle\"\n                    [title]=\"textFor('dragHandleStart')\"\n                    kendoDraggable\n                    (kendoPress)=\"ifEnabled(handleDragPress ,$event)\"\n                    (kendoDrag)=\"ifEnabled(onHandleDrag ,$event)\"\n                    (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                ></a>\n                <a #draghandleEnd\n                    role=\"slider\"\n                    [id]=\"endHandleId\"\n                    [attr.tabindex]=\"disabled ? undefined : tabindex\"\n                    [attr.aria-valuemin]=\"min\"\n                    [attr.aria-valuemax]=\"max\"\n                    [attr.aria-valuenow]=\"value ? value[1] : null\"\n                    [attr.aria-valuetext]=\"valueText\"\n                    [attr.aria-disabled]=\"disabled ? true : undefined\"\n                    [attr.aria-readonly]=\"readonly ? true : undefined\"\n                    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                    [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                    class=\"k-draghandle\"\n                    [title]=\"textFor('dragHandleEnd')\"\n                    kendoDraggable\n                    (kendoPress)=\"ifEnabled(handleDragPress ,$event)\"\n                    (kendoDrag)=\"ifEnabled(onHandleDrag ,$event)\"\n                    (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                ></a>\n            </div>\n\n            <kendo-resize-sensor (resize)=\"sizeComponent()\"></kendo-resize-sensor>\n        </div>\n  "
+            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-dragHandleStart=\"kendo.rangeslider.dragHandleStart|The title of the **Start** drag handle of the Slider.\"\n            dragHandleStart=\"Drag\"\n            i18n-dragHandleEnd=\"kendo.rangeslider.dragHandleEnd|The title of the **End** drag handle of the Slider.\"\n            dragHandleEnd=\"Drag\"\n        >\n\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <div class=\"k-slider-track-wrap\">\n                <ul kendoSliderTicks\n                    #ticks\n                    *ngIf=\"tickPlacement !== 'none'\"\n                    [tickTitle]=\"title\"\n                    [vertical]=\"vertical\"\n                    [step]=\"smallStep\"\n                    [largeStep]=\"largeStep\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [labelTemplate]=\"labelTemplate?.templateRef\"\n                    [attr.aria-hidden]=\"true\"\n                >\n                </ul>\n                <div #track class=\"k-slider-track\">\n                    <div #sliderSelection class=\"k-slider-selection\">\n                    </div>\n                    <a #draghandleStart\n                        role=\"slider\"\n                        [id]=\"startHandleId\"\n                        [attr.tabindex]=\"disabled ? undefined : tabindex\"\n                        [attr.aria-valuemin]=\"min\"\n                        [attr.aria-valuemax]=\"max\"\n                        [attr.aria-valuenow]=\"value ? value[0] : null\"\n                        [attr.aria-valuetext]=\"valueText\"\n                        [attr.aria-disabled]=\"disabled ? true : undefined\"\n                        [attr.aria-readonly]=\"readonly ? true : undefined\"\n                        [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                        [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                        class=\"k-draghandle\"\n                        [title]=\"textFor('dragHandleStart')\"\n                        kendoDraggable\n                        (kendoPress)=\"ifEnabled(handleDragPress ,$event)\"\n                        (kendoDrag)=\"ifEnabled(onHandleDrag ,$event)\"\n                        (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                    ></a>\n                    <a #draghandleEnd\n                        role=\"slider\"\n                        [id]=\"endHandleId\"\n                        [attr.tabindex]=\"disabled ? undefined : tabindex\"\n                        [attr.aria-valuemin]=\"min\"\n                        [attr.aria-valuemax]=\"max\"\n                        [attr.aria-valuenow]=\"value ? value[1] : null\"\n                        [attr.aria-valuetext]=\"valueText\"\n                        [attr.aria-disabled]=\"disabled ? true : undefined\"\n                        [attr.aria-readonly]=\"readonly ? true : undefined\"\n                        [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                        [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                        class=\"k-draghandle\"\n                        [title]=\"textFor('dragHandleEnd')\"\n                        kendoDraggable\n                        (kendoPress)=\"ifEnabled(handleDragPress ,$event)\"\n                        (kendoDrag)=\"ifEnabled(onHandleDrag ,$event)\"\n                        (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                    ></a>\n                </div>\n            </div>\n            <kendo-resize-sensor (resize)=\"sizeComponent()\"></kendo-resize-sensor>\n        </div>\n  "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             Injector,
@@ -5096,8 +5077,7 @@ var SliderTick = /** @class */ (function () {
  * @hidden
  */
 var SliderTicksComponent = /** @class */ (function () {
-    function SliderTicksComponent(rtl) {
-        this.rtl = rtl;
+    function SliderTicksComponent() {
         this.wrapperClasses = 'k-reset k-slider-items';
         this.ticks = [];
     }
@@ -5120,9 +5100,6 @@ var SliderTicksComponent = /** @class */ (function () {
                 result[i].classes['k-tick-large'] = true;
             }
         }
-        if (this.rtl || this.vertical) {
-            result = result.reverse();
-        }
         if (result.length > 0) {
             Object.assign(result[0].classes, this.endTickClasses(true));
             Object.assign(result[result.length - 1].classes, this.endTickClasses(false));
@@ -5175,9 +5152,7 @@ var SliderTicksComponent = /** @class */ (function () {
         Component({
             selector: '[kendoSliderTicks]',
             template: "\n    <li #tickElement *ngFor=\"let tick of ticks;\"\n        [ngClass]=\"tick.classes\"\n        title=\"{{ tickTitle(tick.value) }}\"\n        role=\"presentation\"\n     >\n         <ng-container [ngSwitch]=\"tick.large\">\n            <span class=\"k-label\" *ngSwitchCase=\"true\">\n                <ng-container [ngTemplateOutlet]=\"labelTemplate || defaultLabel\" [ngTemplateOutletContext]=\"tick\">\n                </ng-container>\n            </span>\n            <ng-container *ngSwitchCase=\"false\">&nbsp;</ng-container>\n         </ng-container>\n     </li>\n\n     <ng-template #defaultLabel let-value=\"value\">\n        {{ tickTitle(value) }}\n     </ng-template>\n  "
-        }),
-        __param(0, Optional()), __param(0, Inject(RTL)),
-        __metadata("design:paramtypes", [Boolean])
+        })
     ], SliderTicksComponent);
     return SliderTicksComponent;
 }());