@syncfusion/ej2-inputs 32.2.3 → 32.2.7

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.3
+*  version : 32.2.7
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-inputs",
-  "version": "32.2.3",
+  "version": "32.2.7",
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,10 +8,10 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-inputs.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.2.3",
-    "@syncfusion/ej2-buttons": "~32.2.3",
-    "@syncfusion/ej2-popups": "~32.2.3",
-    "@syncfusion/ej2-splitbuttons": "~32.2.3"
+    "@syncfusion/ej2-base": "~32.2.6",
+    "@syncfusion/ej2-buttons": "~32.2.7",
+    "@syncfusion/ej2-popups": "~32.2.7",
+    "@syncfusion/ej2-splitbuttons": "~32.2.7"
   },
   "devDependencies": {},
   "keywords": [

package/src/color-picker/color-picker.d.ts

@@ -209,6 +209,7 @@ export declare class ColorPicker extends Component<HTMLInputElement> implements
     private onOpen;
     private getPopupInst;
     private bindCallBackEvent;
+    protected getAppendToElement(): HTMLElement;
     private onPopupClose;
     private createPalette;
     private renderRecentColor;

package/src/color-picker/color-picker.js

@@ -202,6 +202,9 @@ var ColorPicker = /** @class */ (function (_super) {
             }
         });
         this.splitBtn.createElement = this.createElement;
+        if (this.isAngular) {
+            this.splitBtn.isAngular = this.isAngular;
+        }
         this.splitBtn.appendTo(splitButton);
         this.splitBtn.element.setAttribute('aria-label', 'colorpicker');
         var preview = this.createElement('span', { className: SPLITPREVIEW });
@@ -275,8 +278,9 @@ var ColorPicker = /** @class */ (function (_super) {
                         _this.modal = _this.createElement('div');
                         _this.modal.className = 'e-' + _this.getModuleName() + ' e-modal';
                         _this.modal.style.display = 'none';
-                        document.body.insertBefore(_this.modal, popupEle);
-                        document.body.className += ' e-colorpicker-overflow';
+                        var appendToElement = _this.getAppendToElement();
+                        appendToElement.insertBefore(_this.modal, popupEle);
+                        appendToElement.className += ' e-colorpicker-overflow';
                         _this.modal.style.display = 'block';
                         _this.modal.style.zIndex = (Number(popupEle.style.zIndex) - 1).toString();
                     }
@@ -310,6 +314,16 @@ var ColorPicker = /** @class */ (function (_super) {
             return callBackPromise;
         };
     };
+    ColorPicker.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     ColorPicker.prototype.onPopupClose = function () {
         this.unWireEvents();
         this.destroyOtherComp();
@@ -319,7 +333,8 @@ var ColorPicker = /** @class */ (function (_super) {
         this.container.innerHTML = '';
         removeClass([this.container], [PICKERCONTENT, PALETTECONTENT]);
         if (Browser.isDevice && this.modal) {
-            removeClass([document.body], 'e-colorpicker-overflow');
+            var appendToElement = this.getAppendToElement();
+            removeClass([appendToElement], 'e-colorpicker-overflow');
             this.modal.style.display = 'none';
             this.modal.outerHTML = '';
             this.modal = null;
@@ -1524,6 +1539,10 @@ var ColorPicker = /** @class */ (function (_super) {
                 this.unWireEvents();
                 this.destroyOtherComp();
             }
+            this.splitBtn.beforeClose = null;
+            this.splitBtn.beforeOpen = null;
+            this.splitBtn.click = null;
+            this.splitBtn.open = null;
             this.splitBtn.destroy();
             this.splitBtn = null;
         }

package/src/common/signature-base.d.ts

@@ -31,6 +31,7 @@ export declare abstract class SignatureBase extends Component<HTMLCanvasElement>
     private tempCanvas;
     private tempContext;
     private canRedraw;
+    private boundResizeHandler;
     /**
      * Gets or sets the background color of the component.
      *

package/src/common/signature-base.js

@@ -65,7 +65,8 @@ var SignatureBase = /** @class */ (function (_super) {
         if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {
             EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
             EventHandler.add(this.canvasContext.canvas, 'keydown', this.keyboardHandler, this);
-            window.addEventListener('resize', this.resizeHandler.bind(this));
+            this.boundResizeHandler = this.resizeHandler.bind(this);
+            window.addEventListener('resize', this.boundResizeHandler);
         }
         else if (this.pointColl) {
             EventHandler.add(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler, this);
@@ -86,7 +87,10 @@ var SignatureBase = /** @class */ (function (_super) {
                 EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
                 EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
             }
-            window.removeEventListener('resize', this.resizeHandler);
+            if (this.boundResizeHandler) {
+                window.removeEventListener('resize', this.boundResizeHandler);
+                this.boundResizeHandler = null;
+            }
         }
     };
     SignatureBase.prototype.setHTMLProperties = function () {

package/src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -109,8 +109,9 @@ var MaskedTextBox = /** @class */ (function (_super) {
             this.element.classList.remove('e-control', 'e-maskedtextbox');
             this.element.classList.add('e-mask-container');
             this.element.appendChild(input);
+            setValue('ej2_instances', ejInstance, input);
+            setValue('ej2_instances', null, this.element);
             this.element = input;
-            setValue('ej2_instances', ejInstance, this.element);
         }
         this.updateHTMLAttrToElement();
         this.checkHtmlAttributes(false);

package/src/numerictextbox/numerictextbox.js

@@ -95,8 +95,9 @@ var NumericTextBox = /** @class */ (function (_super) {
             }
             this.element.classList.remove('e-control', 'e-numerictextbox');
             this.element.appendChild(input);
+            setValue('ej2_instances', ejInstance, input);
+            setValue('ej2_instances', null, this.element);
             this.element = input;
-            setValue('ej2_instances', ejInstance, this.element);
         }
         attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off' });
         var localeText = {

package/src/textarea/textarea.js

@@ -219,8 +219,9 @@ var TextArea = /** @class */ (function (_super) {
                 }
             }
             this.element.appendChild(inputElement);
+            setValue('ej2_instances', ejInstance, inputElement);
+            setValue('ej2_instances', null, this.element);
             this.element = inputElement;
-            setValue('ej2_instances', ejInstance, this.element);
         }
         this.updateHTMLAttributesToElement();
         this.checkAttributes(false);

package/src/textbox/textbox.js

@@ -195,8 +195,9 @@ var TextBox = /** @class */ (function (_super) {
                 }
             }
             this.element.appendChild(inputElement);
+            setValue('ej2_instances', ejInstance, inputElement);
+            setValue('ej2_instances', null, this.element);
             this.element = inputElement;
-            setValue('ej2_instances', ejInstance, this.element);
         }
         this.updateHTMLAttributesToElement();
         this.checkAttributes(false);

package/src/uploader/uploader.d.ts

@@ -525,6 +525,7 @@ export declare class Uploader extends Component<HTMLInputElement> implements INo
     private isFirstFileOnSelection;
     private dragCounter;
     private isPreloadFiles;
+    private documentClickHandler;
     /**
      * Get the file item(li) which are shown in file list.
      *

package/src/uploader/uploader.js

@@ -353,8 +353,10 @@ var Uploader = /** @class */ (function (_super) {
                 inputElement.setAttribute('name', 'UploadFiles');
             }
             this.element.appendChild(inputElement);
+            setValue('ej2_instances', ejInstance, inputElement);
+            // Clear reference from this.element to avoid retaining component instance
+            setValue('ej2_instances', null, this.element);
             this.element = inputElement;
-            setValue('ej2_instances', ejInstance, this.element);
         }
         /* istanbul ignore next */
         if (ejInstance[0].isPureReactComponent) {
@@ -745,7 +747,8 @@ var Uploader = /** @class */ (function (_super) {
     Uploader.prototype.wireEvents = function () {
         EventHandler.add(this.browseButton, 'click', this.browseButtonClick, this);
         EventHandler.add(this.element, 'change', this.onSelectFiles, this);
-        EventHandler.add(document, 'click', this.removeFocus, this);
+        this.documentClickHandler = this.removeFocus.bind(this);
+        EventHandler.add(document, 'click', this.documentClickHandler);
         this.keyboardModule = new KeyboardEvents(this.uploadWrapper, {
             keyAction: this.keyActionHandler.bind(this),
             keyConfigs: this.keyConfigs,
@@ -758,7 +761,10 @@ var Uploader = /** @class */ (function (_super) {
     Uploader.prototype.unWireEvents = function () {
         EventHandler.remove(this.browseButton, 'click', this.browseButtonClick);
         EventHandler.remove(this.element, 'change', this.onSelectFiles);
-        EventHandler.remove(document, 'click', this.removeFocus);
+        if (this.documentClickHandler) {
+            EventHandler.remove(document, 'click', this.documentClickHandler);
+            this.documentClickHandler = null;
+        }
         if (this.isForm) {
             EventHandler.remove(this.formElement, 'reset', this.resetForm);
         }

package/styles/bds-lite.css

@@ -3717,7 +3717,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bds.css

@@ -5968,7 +5968,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap-dark-lite.css

@@ -3188,7 +3188,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap-dark.css

@@ -5136,7 +5136,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap-lite.css

@@ -3178,7 +3178,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap.css

@@ -5118,7 +5118,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap4-lite.css

@@ -3206,7 +3206,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap4.css

@@ -5144,7 +5144,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap5-dark-lite.css

@@ -3238,7 +3238,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap5-dark.css

@@ -5277,7 +5277,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap5-lite.css

@@ -3238,7 +3238,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap5.3-lite.css

@@ -4160,7 +4160,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap5.3.css

@@ -6535,7 +6535,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/bootstrap5.css

@@ -5277,7 +5277,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/fabric-dark-lite.css

@@ -3095,7 +3095,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/fabric-dark.css

@@ -5045,7 +5045,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/fabric-lite.css

@@ -3095,7 +3095,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/fabric.css

@@ -5045,7 +5045,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/fluent-dark-lite.css

@@ -3135,7 +3135,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/fluent-dark.css

@@ -5104,7 +5104,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/fluent-lite.css

@@ -3135,7 +3135,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/fluent.css

@@ -5104,7 +5104,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/fluent2-lite.css

@@ -7296,7 +7296,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/fluent2.css

@@ -12229,7 +12229,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/highcontrast-light-lite.css

@@ -3269,7 +3269,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/highcontrast-light.css

@@ -5260,7 +5260,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/highcontrast-lite.css

@@ -3269,7 +3269,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/highcontrast.css

@@ -5260,7 +5260,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/material3-dark-lite.css

@@ -7919,7 +7919,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/material3-dark.css

@@ -13758,7 +13758,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/material3-lite.css

@@ -7941,7 +7941,7 @@ span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrap
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/material3.css

@@ -13788,7 +13788,7 @@ span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/slider/_layout.scss

@@ -1194,12 +1194,7 @@
           }
 
           &.e-first-tick {
-            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-              background-position-y: top;
-            }
-            @else {
-              background-position-y: center;
-            }
+            background-position-y: top;
           }
 
           &.e-last-tick {

package/styles/slider/bds.css

@@ -348,7 +348,7 @@
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/slider/bootstrap-dark.css

@@ -358,7 +358,7 @@
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/slider/bootstrap.css

@@ -358,7 +358,7 @@
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/slider/bootstrap4.css

@@ -391,7 +391,7 @@
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/slider/bootstrap5-dark.css

@@ -373,7 +373,7 @@
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;

package/styles/slider/bootstrap5.3.css

@@ -541,7 +541,7 @@
   background-repeat: repeat-x;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-first-tick {
-  background-position-y: center;
+  background-position-y: top;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick.e-last-tick {
   background-position-y: bottom;