@refinitiv-ui/elements 6.0.0-next.0 → 6.0.0-next.3

package/lib/slider/index.js

@@ -3,48 +3,11 @@ import { html, css, ControlElement, WarningNotice } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
 import { VERSION } from '../version.js';
 import '../number-field/index.js';
-var SliderNameType;
-(function (SliderNameType) {
-    SliderNameType["value"] = "value";
-    SliderNameType["from"] = "from";
-    SliderNameType["to"] = "to";
-})(SliderNameType || (SliderNameType = {}));
-var PreviousSliderNameType;
-(function (PreviousSliderNameType) {
-    PreviousSliderNameType["value"] = "valuePrevious";
-    PreviousSliderNameType["from"] = "fromPrevious";
-    PreviousSliderNameType["to"] = "toPrevious";
-})(PreviousSliderNameType || (PreviousSliderNameType = {}));
-var NumberFieldNameType;
-(function (NumberFieldNameType) {
-    NumberFieldNameType["fromInput"] = "fromInput";
-    NumberFieldNameType["toInput"] = "toInput";
-})(NumberFieldNameType || (NumberFieldNameType = {}));
-/**
-  * Set prevent default action and stop bubbles event
-  * @private
-  * @param event event mouse or touch
-  * @returns {void}
-  */
-const preventDefault = function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    return event;
-};
-/**
-   * Return value that never exceed the maximum boundary
-   * @private
-   * @param value value for check clamp
-   * @param min max value
-   * @param max min value
-   * @returns number between two numbers
-   */
-const clamp = function (value, min, max) {
-    return Math.max(min, Math.min(value, max)).toString();
-};
+import { clamp, preventDefault, validateNumber, isDecimalNumber, countDecimalPlace } from './utils.js';
 /**
  * Allows users to make selections from a range of values
  *
@@ -63,12 +26,15 @@ const clamp = function (value, min, max) {
  */
 let Slider = class Slider extends ControlElement {
     constructor() {
-        super(...arguments);
+        super();
+        /**
+         * An array of slider thumbs
+         */
+        this.thumbs = [];
+        /**
+         * Whether if the thumb is being drag
+         */
         this.dragging = false;
-        this.stepUse = 1;
-        this.decimalPlaces = 0;
-        this.dragElements = [];
-        this.isEventReady = false;
         this.valuePrevious = '';
         this.fromPrevious = '';
         this.toPrevious = '';
@@ -115,134 +81,25 @@ let Slider = class Slider extends ControlElement {
          */
         this.minRange = '0';
         /**
-         * Input number event blur and notify property
-         * @param event event blur input number field
-         * @returns {void}
+         * Slider element reference
          */
-        this.onBlur = (event) => {
-            if (this.readonly) {
-                return;
-            }
-            const { value, name } = event.target;
-            const currentData = name;
-            const perviousData = `${name}Previous`;
-            if (value && this[currentData] !== value) {
-                this.updateNotifyProperty(currentData, value);
-                this[perviousData] = value;
-            }
-            event.preventDefault();
-        };
+        this.sliderRef = createRef();
         /**
-         * Input number event keydown y
-         * @param event event keydown
-         * @returns {void}
+         * Slider's track reference
          */
-        this.onKeydown = (event) => {
-            if (this.readonly || this.disabled) {
-                return;
-            }
-            this.handleEnterKey(event);
-        };
+        this.trackRef = createRef();
         /**
-         * Start dragging event on slider
-         * @param event event dragstart
-         * @returns {void}
-         */
-        this.onDragStart = (event) => {
-            this.dragging = true;
-            this.classList.add('grabbable');
-            if (this.range) {
-                const pct = this.getMousePosition(event);
-                const mousePos = ((this.maxNumber - this.minNumber) * pct) + this.minNumber;
-                const distFrom = Math.abs(mousePos - this.fromNumber);
-                const distTo = Math.abs(mousePos - this.toNumber);
-                if (distFrom < distTo) {
-                    this.activeThumb = this.dragElements[0];
-                }
-                else if (distFrom > distTo) {
-                    this.activeThumb = this.dragElements[1];
-                }
-                this.dragElements.forEach((el) => {
-                    el.style.zIndex = '5';
-                });
-                this.activeThumb.style.zIndex = '10';
-                // Set focus to input when drag.
-                if (this.isShowInputField) {
-                    this.toggleFocusField(this.activeThumb.getAttribute('name') || '', true);
-                }
-            }
-            else {
-                this.activeThumb = this.dragElements[0];
-            }
-            this.onDrag(event);
-            if (event.changedTouches) {
-                this.addEventListener('touchmove', this.onDrag);
-                this.addEventListener('touchend', this.onDragEnd);
-            }
-            else {
-                window.addEventListener('mousemove', this.onDrag);
-                window.addEventListener('mouseup', this.onDragEnd);
-            }
-        };
+         * @ignore
+        */
+        this.onDrag = this.onDrag.bind(this);
         /**
-         * Dragging after on dragging start event
-         * @param event event mousemove and touchmove
-         * @returns {void}
-         */
-        this.onDrag = (event) => {
-            if (this.minNumber !== this.maxNumber) {
-                const thumbPos = this.getMousePosition(event);
-                const closestStep = this.calculateStep(thumbPos);
-                // Can be dragged slider when the value is valid
-                if (closestStep <= 1) {
-                    const thumbLeft = this.stepUse !== 0 ? closestStep : thumbPos;
-                    const calStepValue = this.calculateValue(thumbLeft);
-                    const prettyVal = Number(this.displayValue(calStepValue));
-                    if (this.range) {
-                        if (this.activeThumb === this.dragElements[1]) {
-                            this.to = this.validateTo(prettyVal).toString();
-                        }
-                        else {
-                            this.from = this.validateFrom(prettyVal).toString();
-                        }
-                    }
-                    else {
-                        this.value = prettyVal.toString();
-                    }
-                }
-            }
-        };
+         * @ignore
+        */
+        this.onDragStart = this.onDragStart.bind(this);
         /**
-         * End dragging event and remove dragging event
-         * @param e event mouseup and touchmove
-         * @returns {void}
-         */
-        this.onDragEnd = (e) => {
-            if (this.dragging) {
-                this.dragging = false;
-                const event = e;
-                if (event.changedTouches) {
-                    this.removeEventListener('touchmove', this.onDrag);
-                    this.removeEventListener('touchend', this.onDragEnd);
-                }
-                else {
-                    window.removeEventListener('mousemove', this.onDrag);
-                    window.removeEventListener('mouseup', this.onDragEnd);
-                }
-                this.classList.remove('grabbable');
-                if (this.classList.length === 0) {
-                    this.removeAttribute('class');
-                }
-                if (!event.changedTouches) {
-                    event.preventDefault();
-                }
-                this.dispatchDataChangedEvent();
-                // Reset tab index of input that's drag.
-                if (this.isShowInputField) {
-                    this.toggleFocusField(this.activeThumb.getAttribute('name') || '', false);
-                }
-            }
-        };
+         * @ignore
+        */
+        this.onDragEnd = this.onDragEnd.bind(this);
     }
     /**
      * Element version number
@@ -251,6 +108,79 @@ let Slider = class Slider extends ControlElement {
     static get version() {
         return VERSION;
     }
+    /**
+     * Define styles in a tagged template literal, using the css tag function.
+     * @returns CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: flex;
+      }
+      [part=slider-wrapper] {
+        position: relative;
+        width: 100%;
+      }
+      [part=slider] {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+      }
+      :host(:not([disabled]):focus){
+        outline:none;
+      }
+      :host([show-steps]) [part=track-wrapper]::after {
+        display:block;
+        position: absolute;
+        content: "";
+        right: 0;
+      }
+      [part=track-wrapper]{
+        content: "";
+        position: absolute;
+        width: 100%;
+        top: 50%;
+        left: 0;
+        pointer-events: none;
+      }
+      [part=thumb-container]{
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 5;
+      }
+      [part=thumb]{
+        position: absolute;
+        margin: 0 auto;
+      }
+      [part=pin]{
+        display: flex;
+        position: absolute;
+        align-items: center;
+        justify-content: center;
+        z-index: 1;
+      }
+      :host([show-steps]) [part=step-container]{
+        position: absolute;
+        left: 0;
+        width: 100%;
+      }
+      :host([show-steps]) [part=step]{
+        width: 100%;
+        position: absolute;
+        left: 0;
+      }
+      [part=track-fill]{
+        z-index: 2;
+        content: "";
+        position: absolute;
+        left: 0;
+      }
+      :host([show-steps][step="0"]) [part=track-wrapper]::after{
+        width: 0;
+      }
+    `;
+    }
     /**
      * Converts value from string to number for calculations
      * @returns value of input as a number
@@ -295,6 +225,18 @@ let Slider = class Slider extends ControlElement {
         }
         return step;
     }
+    /**
+     * Compute and normalise step value for calculations
+     * @returns step value that should be inside the min / max boundary
+     */
+    get stepRange() {
+        const step = Math.abs(this.stepNumber);
+        if (step > this.maxNumber - this.minNumber && !isDecimalNumber(step)) {
+            // new step shouldn't be larger than slider
+            return Math.abs(this.maxNumber - this.minNumber);
+        }
+        return step;
+    }
     /**
      * Converts from value from string to number for calculations
      * @returns from value of slider as a number
@@ -328,6 +270,18 @@ let Slider = class Slider extends ControlElement {
         }
         return minRange;
     }
+    /**
+     * Number of decimal places used for displaying value
+     * Based on step or min decimal places
+     */
+    get decimalPlace() {
+        if (isDecimalNumber(this.stepRange) || isDecimalNumber(this.minNumber)) {
+            const stepDecimal = countDecimalPlace(this.stepRange);
+            const minDecimal = countDecimalPlace(this.minNumber);
+            return stepDecimal > minDecimal ? stepDecimal : minDecimal;
+        }
+        return 0;
+    }
     /**
      * Return hide/show input field state
      * @returns {boolean} true if showInputField value is exist
@@ -342,62 +296,61 @@ let Slider = class Slider extends ControlElement {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        // initialize slider
-        void this.updateComplete.then(() => {
-            this.initializeProperty();
-            this.initSlider();
-            this.updateEventListeners();
-        });
+        this.prepareValues();
+        this.prepareThumbs();
+        this.prepareSliderTrack();
     }
     /**
-     * On Update lifecycle
+     * On willUpdate lifecycle
      * @param changedProperties changed properties
      * @returns {void}
      */
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('disabled') || changedProperties.has('readonly')) {
-            this.updateEventListeners();
-        }
-        changedProperties.forEach((oldValue, propName) => {
-            if (['value', 'min', 'max', 'from', 'to', 'step', 'minRange'].includes(propName)) {
-                this.showWarningInvalidProperty(propName);
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if ((changedProperties.has('disabled') && changedProperties.get('disabled') !== undefined)
+            || (changedProperties.has('readonly') && changedProperties.get('readonly') !== undefined)) {
+            this.prepareSliderTrack();
+        }
+        changedProperties.forEach((_, changedProperty) => {
+            if (['value', 'min', 'max', 'from', 'to', 'step', 'minRange'].includes(changedProperty)) {
+                this.showWarningInvalidProperty(changedProperty);
             }
         });
     }
     /**
+     * On updated lifecycle
      * @param changedProperties changed properties
      * @returns {void}
      */
     updated(changedProperties) {
         super.updated(changedProperties);
-        changedProperties.forEach((oldValue, propName) => {
-            if (propName === 'value') {
-                this.onValueChange();
-            }
-            else if (propName === 'min') {
-                this.onMinChange(oldValue);
-            }
-            else if (propName === 'max') {
-                this.onMaxChange(oldValue);
-            }
-            else if (propName === 'from' && this.range) {
-                this.onValueChangeFrom();
-            }
-            else if (propName === 'to' && this.range) {
-                this.onValueChangeTo();
-            }
-            else if (propName === 'step') {
-                this.onStepChange();
-            }
-            else if (propName === 'minRange') {
-                this.onMinRangeChange();
+        if (changedProperties.has('value')) {
+            this.onValueChange();
+        }
+        if (changedProperties.has('min')) {
+            this.onMinChange(changedProperties.get('min'));
+        }
+        if (changedProperties.has('max')) {
+            this.onMaxChange(changedProperties.get('max'));
+        }
+        if (this.range) {
+            if (changedProperties.has('from')) {
+                this.onFromValueChange();
             }
-            else if (propName === 'range') {
-                this.initializeProperty();
-                this.initSlider();
+            if (changedProperties.has('to')) {
+                this.onToValueChange();
             }
-        });
+        }
+        if (changedProperties.has('step')) {
+            this.onStepChange();
+        }
+        if (changedProperties.has('minRange')) {
+            this.onMinRangeChange();
+        }
+        if (changedProperties.has('range')) {
+            this.prepareValues();
+            this.prepareThumbs();
+        }
     }
     /**
      * Show Warning a warning message invalid property
@@ -442,16 +395,13 @@ let Slider = class Slider extends ControlElement {
         }
     }
     /**
-     * Initialise class properties
+     * Initialises slider value properties
      * @returns {void}
      */
-    initializeProperty() {
-        this.stepUse = this.calculateStepRange(this.stepNumber);
+    prepareValues() {
         if (this.minNumber !== this.maxNumber) {
-            // init decimal places
-            this.updateDecimalPlaces();
             if (this.range) {
-                this.activeThumb = this.dragElements[1];
+                this.activeThumb = this.thumbs[1];
                 if (this.minRangeNumber) {
                     const distanceFromTo = Math.abs(this.toNumber - this.fromNumber);
                     const clampValueFrom = this.toNumber - this.minRangeNumber;
@@ -480,120 +430,83 @@ let Slider = class Slider extends ControlElement {
         else {
             this.value = this.min;
         }
-        // initial old value
         this.valuePrevious = this.value;
         this.toPrevious = this.to;
         this.fromPrevious = this.from;
     }
     /**
-     * Initialise slider properties
+     * Query and assigned thumbs depending on slider mode and add event listeners to it
      * @returns {void}
      */
-    initSlider() {
-        this.dragElements = [];
-        if (this.range) {
-            this.shadowRoot?.querySelectorAll('#thumbContainer').forEach((item) => {
-                this.dragElements.push(item);
-            });
-        }
-        else {
-            this.dragElements = [
-                this.thumbContainer
-            ];
-        }
-        this.activeThumb = this.dragElements[0];
-        this.dragElements.concat(this).forEach((el) => {
-            el.addEventListener('drag', preventDefault);
-            el.addEventListener('dragstart', preventDefault);
-            el.addEventListener('dragend', preventDefault);
+    prepareThumbs() {
+        this.thumbs = [];
+        const thumbs = this.shadowRoot?.querySelectorAll('[part~=thumb-container]') || [];
+        this.thumbs = this.range ? Array.from(thumbs) : [thumbs[0]];
+        this.activeThumb = this.thumbs[0];
+        this.thumbs.forEach((thumb) => {
+            thumb.addEventListener('drag', preventDefault);
+            thumb.addEventListener('dragstart', preventDefault);
+            thumb.addEventListener('dragend', preventDefault);
         });
-        this.isEventReady = true;
     }
     /**
-     * Calculate step in range
-     * @param step value step for calculate
-     * @returns step value that should be inside the min / max boundary
-     */
-    calculateStepRange(step) {
-        const newStep = Math.abs(step);
-        if (newStep > this.maxNumber - this.minNumber && !this.isDecimalNumber(newStep)) {
-            // new step shouldn't be larger than slider
-            return Math.abs(this.maxNumber - this.minNumber);
-        }
-        return newStep;
-    }
-    /**
-     * Check if step or min number is decimal
-     * If yes, set number of decimal places
+     * Add or remove event listener on slider track depending on slider disabled and readonly state
      * @returns {void}
      */
-    updateDecimalPlaces() {
-        // Set decimal places when step or min have decimal
-        if (this.isDecimalNumber(this.stepUse) || this.isDecimalNumber(this.minNumber)) {
-            const stepUseDecimal = this.countDecimals(this.stepUse);
-            const minDecimal = this.countDecimals(this.minNumber);
-            this.decimalPlaces = stepUseDecimal > minDecimal ? stepUseDecimal : minDecimal;
+    prepareSliderTrack() {
+        if (this.disabled || this.readonly) {
+            this.sliderRef.value?.removeEventListener('mousedown', this.onDragStart);
+            this.sliderRef.value?.removeEventListener('touchstart', this.onDragStart);
         }
         else {
-            this.decimalPlaces = 0;
+            this.sliderRef.value?.addEventListener('mousedown', this.onDragStart, { passive: true });
+            this.sliderRef.value?.addEventListener('touchstart', this.onDragStart, { passive: true });
         }
     }
     /**
-     * Count decimal number
-     * @param value value for checking
-     * @returns number of decimal points
-     */
-    countDecimals(value) {
-        return Number(value).toString().split('.')[1]?.length | 0;
-    }
-    /**
-     * Check if decimal number e.g. 10.5, etc
-     * @param value value for checking
-     * @returns true if value is decimal
-     */
-    isDecimalNumber(value) {
-        return value % 1 !== 0;
-    }
-    /**
-     * Calculate percentage by value
+     * Calculate percentage from value, min and max
      * @param value value to be calculated
      * @returns percentage
      */
     calculatePercentage(value) {
-        const valuePercent = Math.abs((((value || 0) - this.minNumber) / (this.maxNumber - this.minNumber)) * 100);
-        if (valuePercent > 100) {
+        const percentage = Math.abs((((value || 0) - this.minNumber) / (this.maxNumber - this.minNumber)) * 100);
+        if (percentage > 100) {
             return 100;
         }
-        else if (valuePercent < 0) {
+        else if (percentage < 0) {
             return 0;
         }
         else {
-            return valuePercent;
+            return percentage;
         }
     }
     /**
-     * Add and remove event listener when have disable and readonly properties
+     * Input number event blur and notify property
+     * @param event event blur input number field
      * @returns {void}
      */
-    updateEventListeners() {
-        if (this.isEventReady) {
-            if (this.disabled || this.readonly) {
-                this.slider.removeEventListener('mousedown', this.onDragStart);
-                this.slider.removeEventListener('touchstart', this.onDragStart);
-            }
-            else {
-                this.slider.addEventListener('mousedown', this.onDragStart, { passive: true });
-                this.slider.addEventListener('touchstart', this.onDragStart, { passive: true });
-            }
+    onBlur(event) {
+        if (this.readonly) {
+            return;
         }
+        const { value, name } = event.target;
+        const currentData = name;
+        const previousData = `${name}Previous`;
+        if (value && this[currentData] !== value) {
+            this.updateNotifyProperty(currentData, value);
+            this[previousData] = value;
+        }
+        event.preventDefault();
     }
     /**
-     * Handles key press keyboard events
-     *
-     * @param event Event Object
+     * Input number event keydown y
+     * @param event event keydown
      * @returns {void}
      */
-    handleEnterKey(event) {
+    onKeydown(event) {
+        if (this.readonly || this.disabled) {
+            return;
+        }
         if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
             event.target.blur();
         }
@@ -605,21 +518,21 @@ let Slider = class Slider extends ControlElement {
      * @returns {void}
      */
     updateNotifyProperty(name, value) {
-        let isUpdateValue = false;
-        const valueSanitize = Number(this.sanitizeNumber(Number(value), 0));
+        let shouldUpdate = false;
+        const validatedValue = Number(validateNumber(Number(value), 0));
         if (name === 'to') {
-            isUpdateValue = this.isValueInBoundary(valueSanitize, 'to');
+            shouldUpdate = this.isValueInBoundary(validatedValue, 'to');
         }
         else {
-            isUpdateValue = this.isValueInBoundary(valueSanitize, '');
+            shouldUpdate = this.isValueInBoundary(validatedValue, '');
         }
-        if (isUpdateValue) {
+        if (shouldUpdate) {
             (this[name]) = value;
             this.notifyPropertyChange(name, value);
         }
         else {
-            const nameInput = `${name}Input`;
-            this[nameInput].value = this[name];
+            const inputName = `${name}Input`;
+            this[inputName].value = this[name];
         }
     }
     /**
@@ -638,8 +551,8 @@ let Slider = class Slider extends ControlElement {
     }
     /**
      * Set focus to input from state
-     * @param {String} name number field's name
-     * @param {Boolean} focusState state of focus
+     * @param name number field's name
+     * @param focusState state of focus
      * @returns {void}
      */
     toggleFocusField(name, focusState) {
@@ -647,12 +560,56 @@ let Slider = class Slider extends ControlElement {
             this[`${name}Input`].setAttribute('tabindex', `${focusState ? 1 : 0}`);
         }
     }
+    /**
+     * Start dragging event on slider
+     * @param event event dragstart
+     * @returns {void}
+     */
+    onDragStart(event) {
+        this.dragging = true;
+        this.classList.add('grabbable');
+        if (this.range) {
+            const percentage = this.getMousePosition(event);
+            const mousePosition = ((this.maxNumber - this.minNumber) * percentage) + this.minNumber;
+            const distanceFrom = Math.abs(mousePosition - this.fromNumber);
+            const distanceTo = Math.abs(mousePosition - this.toNumber);
+            if (distanceFrom < distanceTo) {
+                this.activeThumb = this.thumbs[0];
+            }
+            else if (distanceFrom > distanceTo) {
+                this.activeThumb = this.thumbs[1];
+            }
+            this.thumbs.forEach((el) => {
+                el.style.zIndex = '5';
+            });
+            this.activeThumb.style.zIndex = '10';
+            // Set focus to input when drag.
+            if (this.isShowInputField) {
+                this.toggleFocusField(this.activeThumb.getAttribute('name') || '', true);
+            }
+        }
+        else {
+            this.activeThumb = this.thumbs[0];
+        }
+        this.onDrag(event);
+        if (event.changedTouches) {
+            this.addEventListener('touchmove', this.onDrag);
+            this.addEventListener('touchend', this.onDragEnd);
+        }
+        else {
+            window.addEventListener('mousemove', this.onDrag);
+            window.addEventListener('mouseup', this.onDragEnd);
+        }
+    }
     /**
      * @param event event mousemove and touchmove
      * @returns mouse position by percentage
      */
     getMousePosition(event) {
-        const sliderRect = this.trackWrapper.getBoundingClientRect();
+        const sliderRect = this.trackRef.value?.getBoundingClientRect();
+        if (!sliderRect) {
+            return 1;
+        }
         // check drag desktop or mobile
         const pageX = event.changedTouches ? event.changedTouches[0].pageX : event.pageX;
         const positionSize = pageX - sliderRect.left;
@@ -663,6 +620,35 @@ let Slider = class Slider extends ControlElement {
             return 1;
         }
     }
+    /**
+     * Dragging after on dragging start event
+     * @param event event mousemove and touchmove
+     * @returns {void}
+     */
+    onDrag(event) {
+        if (this.minNumber === this.maxNumber) {
+            return;
+        }
+        const thumbPosition = this.getMousePosition(event);
+        const nearestStep = this.calculateStep(thumbPosition);
+        if (nearestStep > 1) {
+            return;
+        }
+        const thumbLeft = this.stepRange !== 0 ? nearestStep : thumbPosition;
+        const computedStepValue = this.calculateValue(thumbLeft);
+        const displayedValue = Number(this.displayValue(computedStepValue));
+        if (this.range) {
+            if (this.activeThumb === this.thumbs[1]) {
+                this.to = this.validateTo(displayedValue).toString();
+            }
+            else {
+                this.from = this.validateFrom(displayedValue).toString();
+            }
+        }
+        else {
+            this.value = displayedValue.toString();
+        }
+    }
     /**
      * Handle 'from' value on drag out of boundary.
      * @param value value from change
@@ -692,12 +678,12 @@ let Slider = class Slider extends ControlElement {
         }
     }
     /**
-     * Calculate the nearest interval
+     * Calculate the nearest step interval
      * @param thumbPosition thumb position dragging on slider
      * @returns position step on slider
      */
     calculateStep(thumbPosition) {
-        const stepSize = this.calculatePercentage(this.minNumber + this.stepUse) / 100;
+        const stepSize = this.calculatePercentage(this.minNumber + this.stepRange) / 100;
         // calculate step to current point to next point
         const posToFixStep = Math.round(thumbPosition / stepSize) * stepSize;
         if (thumbPosition <= posToFixStep + (stepSize / 2)) {
@@ -736,11 +722,11 @@ let Slider = class Slider extends ControlElement {
      * @returns formatted value
      */
     displayValue(value) {
-        if (this.isDecimalNumber(value)) {
-            const valueDecimalCount = this.countDecimals(value);
+        if (isDecimalNumber(value)) {
+            const valueDecimalCount = countDecimalPlace(value);
             // return value decimal by a boundary of max decimal
-            if (valueDecimalCount > this.decimalPlaces) {
-                return value.toFixed(this.decimalPlaces);
+            if (valueDecimalCount > this.decimalPlace) {
+                return value.toFixed(this.decimalPlace);
             }
             else {
                 return value.toString();
@@ -750,6 +736,37 @@ let Slider = class Slider extends ControlElement {
             return value.toString();
         }
     }
+    /**
+     * End dragging event and remove dragging event
+     * @param event event mouseup and touchmove
+     * @returns {void}
+     */
+    onDragEnd(event) {
+        if (this.dragging) {
+            this.dragging = false;
+            const touchEvent = event;
+            if (touchEvent.changedTouches) {
+                this.removeEventListener('touchmove', this.onDrag);
+                this.removeEventListener('touchend', this.onDragEnd);
+            }
+            else {
+                window.removeEventListener('mousemove', this.onDrag);
+                window.removeEventListener('mouseup', this.onDragEnd);
+            }
+            this.classList.remove('grabbable');
+            if (this.classList.length === 0) {
+                this.removeAttribute('class');
+            }
+            if (!touchEvent.changedTouches) {
+                event.preventDefault();
+            }
+            this.dispatchDataChangedEvent();
+            // Reset tabIndex of input that's being drag.
+            if (this.isShowInputField) {
+                this.toggleFocusField(this.activeThumb.getAttribute('name') || '', false);
+            }
+        }
+    }
     /**
      * Value observer
      * @returns {void}
@@ -758,12 +775,12 @@ let Slider = class Slider extends ControlElement {
         if (this.readonly) {
             const valuePercent = this.calculatePercentage(Number(this.value)) / 100;
             const closestStep = this.calculateStep(valuePercent);
-            const thumbLeft = this.stepUse !== 0 ? closestStep : valuePercent;
+            const thumbLeft = this.stepRange !== 0 ? closestStep : valuePercent;
             const calStepValue = this.calculateValue(thumbLeft);
             this.value = this.displayValue(calStepValue);
         }
         else {
-            const valueSanitize = Number(this.sanitizeNumber(Number(this.value), 0));
+            const valueSanitize = Number(validateNumber(Number(this.value), 0));
             if (this.isValueInBoundary(valueSanitize, '')) {
                 this.value = this.displayValue(valueSanitize);
             }
@@ -786,8 +803,8 @@ let Slider = class Slider extends ControlElement {
      * From value observer
      * @returns {void}
      */
-    onValueChangeFrom() {
-        const valueFrom = Number(this.sanitizeNumber(this.fromNumber, 0));
+    onFromValueChange() {
+        const valueFrom = Number(validateNumber(this.fromNumber, 0));
         if (this.isValueInBoundary(valueFrom, 'from')) {
             this.from = this.displayValue(this.fromNumber);
         }
@@ -811,30 +828,6 @@ let Slider = class Slider extends ControlElement {
             this.fromPrevious = this.from;
         }
     }
-    /**
-     * Return fallback number of the value is invalid
-     * @param value value for checking
-     * @param fallbackValue fallback value when value is not number;
-     * @returns sanitized number
-     */
-    sanitizeNumber(value, fallbackValue) {
-        let val;
-        if (this.isNumberValue(value) && typeof value === 'number') {
-            val = value.toString();
-        }
-        else {
-            val = fallbackValue;
-        }
-        return val.toString();
-    }
-    /**
-     * Check if value is number
-     * @param value value for checking
-     * @returns true if value is numeric
-     */
-    isNumberValue(value) {
-        return !isNaN(value) && !isNaN(Number(value));
-    }
     /**
      * Check if value is inside min / max boundary
      * @param value value is checking
@@ -858,7 +851,7 @@ let Slider = class Slider extends ControlElement {
                 return false;
             }
             // check step min and max in range
-            if (this.stepUse < this.minNumber || this.stepUse > this.maxNumber) {
+            if (this.stepRange < this.minNumber || this.stepRange > this.maxNumber) {
                 return true;
             }
         }
@@ -868,8 +861,8 @@ let Slider = class Slider extends ControlElement {
      * To value observer
      * @returns {void}
      */
-    onValueChangeTo() {
-        const valueTo = Number(this.sanitizeNumber(this.toNumber, 0));
+    onToValueChange() {
+        const valueTo = Number(validateNumber(this.toNumber, 0));
         if (this.isValueInBoundary(valueTo, 'to')) {
             this.to = this.displayValue(valueTo);
         }
@@ -898,17 +891,14 @@ let Slider = class Slider extends ControlElement {
      * @returns {void}
      */
     onStepChange() {
-        this.step = this.sanitizeNumber(this.stepNumber, 1);
-        this.stepUse = this.calculateStepRange(this.stepNumber);
-        // Set decimal places value when step is decimal
-        this.updateDecimalPlaces();
+        this.step = validateNumber(this.stepNumber, 1);
     }
     /**
      * Min range observer
      * @returns {void}
      */
     onMinRangeChange() {
-        const valueMinRange = Math.abs(Number(this.sanitizeNumber(this.minRangeNumber, 0)));
+        const valueMinRange = Math.abs(Number(validateNumber(this.minRangeNumber, 0)));
         const maximumRangeMinMax = Math.abs(this.maxNumber - this.minNumber);
         const maximumRangeFromTo = Math.abs(this.toNumber - this.fromNumber);
         if (valueMinRange && valueMinRange >= this.stepNumber) {
@@ -932,9 +922,7 @@ let Slider = class Slider extends ControlElement {
      * @returns {void}
      */
     onMinChange(oldValue) {
-        this.min = this.sanitizeNumber(this.minNumber, 0);
-        // Set decimal places value when min is decimal
-        this.updateDecimalPlaces();
+        this.min = validateNumber(this.minNumber, 0);
         if (this.minNumber > this.maxNumber) {
             this.min = this.max;
         }
@@ -956,7 +944,7 @@ let Slider = class Slider extends ControlElement {
      * @returns {void}
      */
     onMaxChange(oldValue) {
-        this.max = this.sanitizeNumber(this.maxNumber, 100);
+        this.max = validateNumber(this.maxNumber, 100);
         if (this.maxNumber < this.minNumber) {
             this.max = this.min;
         }
@@ -977,7 +965,7 @@ let Slider = class Slider extends ControlElement {
      * @param range show range slider
      * @returns Track template
      */
-    renderTrackWrapper(range) {
+    renderTrack(range) {
         const stepContainerSize = this.calculatePercentage(this.minNumber + this.stepNumber);
         const translateX = (stepContainerSize / 2);
         const stepsStyle = { transform: `translateX(${translateX}%)`, backgroundSize: `${stepContainerSize}% 100%` };
@@ -986,12 +974,12 @@ let Slider = class Slider extends ControlElement {
             ? { width: `${this.calculatePercentage(this.toNumber) - this.calculatePercentage(this.fromNumber)}%`, left: `${this.calculatePercentage(this.fromNumber)}%` }
             : { width: `${this.calculatePercentage(Number(this.value))}%` };
         return html `
-    <div part="track-wrapper" id="trackWrapper">
-      <div part="track-fill" id="trackFill" style=${styleMap(trackFillStyle)}></div>
-      <div part="step-container" id="stepContainer" style=${styleMap(stepContainerStyle)}>
-        <div part="step" id="steps" style=${styleMap(stepsStyle)}></div>
+      <div part="track-wrapper" ${ref(this.trackRef)}>
+        <div part="track-fill" style=${styleMap(trackFillStyle)}></div>
+        <div part="step-container" style=${styleMap(stepContainerStyle)}>
+          <div part="step" style=${styleMap(stepsStyle)}></div>
+        </div>
       </div>
-    </div>
     `;
     }
     /**
@@ -1004,11 +992,12 @@ let Slider = class Slider extends ControlElement {
     renderThumb(value, percentageValue, name) {
         const thumbStyle = { left: `${percentageValue}%` };
         return html `
-    <div part="thumb-container" name=${name} id="thumbContainer" style=${styleMap(thumbStyle)}>
-      <div part="pin">
-        <span id="pinMarker" part="pin-value-marker">${value}</span></div>
-      <div part="thumb" draggable="true" id="thumb"></div>
-    </div>
+      <div part="thumb-container" name=${name} style=${styleMap(thumbStyle)}>
+        <div part="pin">
+          <span part="pin-value-marker">${value}</span>
+        </div>
+        <div part="thumb" draggable="true"></div>
+      </div>
     `;
     }
     /**
@@ -1033,92 +1022,19 @@ let Slider = class Slider extends ControlElement {
      */
     renderNumberField(value, name) {
         return html `
-        <ef-number-field
-          @blur=${this.onBlur}
-          @keydown=${this.onKeydown}
-          part="input"
-          name="${name}"
-          no-spinner
-          .value="${value}"
-          min="${this.min}"
-          max="${this.max}"
-          step="${this.step}"
-          ?disabled="${this.disabled}"
-          ?readonly="${this.readonly || this.showInputField === 'readonly'}"
-        ></ef-number-field>
-    `;
-    }
-    /**
-     * Define styles in a tagged template literal, using the css tag function.
-     * @returns CSS template
-     */
-    static get styles() {
-        return css `
-      :host {
-        display: flex;
-      }
-      [part=slider-wrapper] {
-        position: relative;
-        width: 100%;
-      }
-      [part=slider] {
-        width: 100%;
-        height: 100%;
-        display: inline-block;
-      }
-      :host(:not([disabled]):focus){
-        outline:none;
-      }
-      :host([show-steps]) [part=track-wrapper]::after {
-        display:block;
-        position: absolute;
-        content: "";
-        right: 0;
-      }
-      [part=track-wrapper]{
-        content: "";
-        position: absolute;
-        width: 100%;
-        top: 50%;
-        left: 0;
-        pointer-events: none;
-      }
-      [part=thumb-container]{
-        position: absolute;
-        top: 0;
-        width: 100%;
-        z-index: 5;
-      }
-      [part=thumb]{
-        position: absolute;
-        margin: 0 auto;
-      }
-      [part=pin]{
-        display: flex;
-        position: absolute;
-        align-items: center;
-        justify-content: center;
-        z-index: 1;
-      }
-      :host([show-steps]) [part=step-container]{
-        position: absolute;
-        left: 0;
-        width: 100%;
-      }
-      :host([show-steps]) [part=step]{
-        width: 100%;
-        position: absolute;
-        left: 0;
-      }
-      [part=track-fill]{
-        z-index: 2;
-        content: "";
-        position: absolute;
-        left: 0;
-      }
-      :host([show-steps][step="0"]) [part=track-wrapper]::after{
-        width: 0;
-      }
+      <ef-number-field
+        @blur=${this.onBlur}
+        @keydown=${this.onKeydown}
+        part="input"
+        name="${name}"
+        no-spinner
+        .value="${value}"
+        min="${this.min}"
+        max="${this.max}"
+        step="${this.step}"
+        ?disabled="${this.disabled}"
+        ?readonly="${this.readonly || this.showInputField === 'readonly'}"
+      ></ef-number-field>
     `;
     }
     /**
@@ -1129,8 +1045,8 @@ let Slider = class Slider extends ControlElement {
         return html `
       ${this.range && this.isShowInputField ? this.renderNumberField(this.from, 'from') : null}
       <div part="slider-wrapper">
-        <div part="slider">
-          ${this.renderTrackWrapper(this.range)}
+        <div part="slider" ${ref(this.sliderRef)}>
+          ${this.renderTrack(this.range)}
           ${this.range ? this.renderThumbRange(this.fromNumber, this.toNumber) : this.renderThumb(this.valueNumber, this.calculatePercentage(Number(this.value)), 'value')}
         </div>
       </div>
@@ -1169,15 +1085,6 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'min-range' })
 ], Slider.prototype, "minRange", void 0);
-__decorate([
-    query('[part="slider"]')
-], Slider.prototype, "slider", void 0);
-__decorate([
-    query('#trackWrapper')
-], Slider.prototype, "trackWrapper", void 0);
-__decorate([
-    query('#thumbContainer')
-], Slider.prototype, "thumbContainer", void 0);
 __decorate([
     query('ef-number-field[name=value]')
 ], Slider.prototype, "valueInput", void 0);