@tet/tet-components 1.3.157-testing → 1.4.0-staging

package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.js

@@ -5,620 +5,6 @@ import { debounce, getRemSize } from "../../../../services/utils/index";
  */
 export class TetRangeSlider {
     constructor() {
-        /**
-         * Slider event handler.
-         * Updates progress bar.
-         * Calculates `currentValue`.
-         *
-         * @param event input event.
-         */
-        this.onSliderInput = (event) => {
-            this.updateProgress();
-            const inputValue = parseFloat(event.target.value);
-            const closestDataPoint = this.getClosestOriginalDataPoint(inputValue);
-            const closestValueIndex = this.dataSet.indexOf(closestDataPoint);
-            const originalValue = parseFloat(Object.keys(closestDataPoint)[0]);
-            const overrideValue = closestDataPoint[originalValue];
-            if (inputValue === originalValue) {
-                this.currentValue = overrideValue;
-                return;
-            }
-            const range = [closestDataPoint];
-            if (inputValue < originalValue) {
-                range.unshift(this.dataSet[closestValueIndex - 1]);
-            }
-            else {
-                range.push(this.dataSet[closestValueIndex + 1]);
-            }
-            const originalRangeStart = parseFloat(Object.keys(range[0])[0]);
-            const originalRangeEnd = parseFloat(Object.keys(range[1])[0]);
-            const originalRange = originalRangeEnd - originalRangeStart;
-            const overrideRangeStart = range[0][originalRangeStart];
-            const overrideRangeEnd = range[1][originalRangeEnd];
-            const overrideRange = overrideRangeEnd - overrideRangeStart;
-            let currentValue = (inputValue - originalRangeStart) * (overrideRange / originalRange) + overrideRangeStart;
-            if (currentValue > this.maxValue) {
-                currentValue = this.maxValue;
-            }
-            else if (currentValue < this.minValue) {
-                currentValue = this.minValue;
-            }
-            const decimals = this.getStepDecimals(this.step);
-            let snappedValue = Math.round(currentValue / this.step) * this.step;
-            snappedValue = parseFloat(snappedValue.toFixed(decimals));
-            this.currentValue = snappedValue;
-        };
-        /**
-         * Manual value input event handler.
-         * Updates slider position.
-         * @param event input event.
-         */
-        this.onInputChange = (event) => {
-            let inputValue = parseFloat(event.target.value);
-            if (Number.isNaN(inputValue)) {
-                inputValue = 0;
-            }
-            if (inputValue > this.inputMaxValue) {
-                inputValue = this.inputMaxValue;
-                event.target.value = this.inputMaxValue;
-            }
-            this.setSliderValue(inputValue);
-            this.currentValue = inputValue;
-            this.updateProgress();
-        };
-        /** Input keydown event listener.
-         *  Limits the input range to the defined `minValue` and `maxValue` values when using keyboard to increment values.
-         * @param {KeyboardEvent} event
-         */
-        this.onInputKeyDown = (event, ignoreHorizontalArrows = false) => {
-            const incrementKeyCodes = ['PageUp', 'ArrowUp', 'ArrowRight'];
-            const decrementKeyCodes = ['PageDown', 'ArrowDown', 'ArrowLeft'];
-            const keycode = event.code;
-            if (ignoreHorizontalArrows) {
-                incrementKeyCodes.pop();
-                decrementKeyCodes.pop();
-            }
-            if (incrementKeyCodes.includes(keycode)) {
-                event.preventDefault();
-                event.stopImmediatePropagation();
-                if (this.lockToDataPoint || keycode === 'PageUp') {
-                    this.onControlNextClick();
-                }
-                else {
-                    this.handleSliderArrowKeys('increment');
-                }
-            }
-            if (decrementKeyCodes.includes(keycode)) {
-                event.preventDefault();
-                event.stopImmediatePropagation();
-                if (this.lockToDataPoint || keycode === 'PageDown') {
-                    this.onControlPreviousClick();
-                }
-                else {
-                    this.handleSliderArrowKeys('decrement');
-                }
-            }
-            const keyCodes = incrementKeyCodes.concat(decrementKeyCodes);
-            if (keyCodes.includes(keycode)) {
-                setTimeout(() => this.sliderChange.emit(this.currentValue));
-            }
-        };
-        /**
-         * `sliderContainerRef` scroll listener.
-         * Updates slider values relative to the container scroll amount.
-         */
-        this.onContainerScroll = () => {
-            if (this.isSliding) {
-                return;
-            }
-            this.onSliderChangeDebounce();
-            let currentScroll = this.sliderContainerRef.scrollLeft;
-            const thumbWidth = this.tooltipHandleRef.getBoundingClientRect().width;
-            const sliderWidth = this.sliderRef.getBoundingClientRect().width;
-            const minScrollLeft = sliderWidth / 2 + thumbWidth / 2;
-            const maxScrollLeft = minScrollLeft + sliderWidth - thumbWidth;
-            if (currentScroll < minScrollLeft) {
-                currentScroll = minScrollLeft;
-            }
-            if (currentScroll > maxScrollLeft) {
-                currentScroll = maxScrollLeft;
-            }
-            currentScroll = Math.round(currentScroll * 100) / 100;
-            this.sliderContainerRef.scrollLeft = currentScroll;
-            const scrollRange = maxScrollLeft - minScrollLeft;
-            const sliderRange = this.maxValue - this.minValue;
-            const currentScrollInRange = currentScroll - minScrollLeft;
-            const currentScrollPercent = Math.round((currentScrollInRange / scrollRange) * 1000) / 1000;
-            const sliderValue = sliderRange * currentScrollPercent + this.minValue;
-            const closestDataPoint = this.getClosestOriginalDataPoint(sliderValue);
-            const dataSetIndex = this.dataSet.indexOf(closestDataPoint);
-            if (dataSetIndex === 0 && sliderValue < parseFloat(Object.keys(closestDataPoint)[0])) {
-                this.currentValue = Object.values(closestDataPoint)[0];
-                this.setSliderValue(this.currentValue);
-                return;
-            }
-            if (sliderValue === parseFloat(Object.keys(closestDataPoint)[0])) {
-                this.currentValue = Object.values(closestDataPoint)[0];
-                this.setSliderValue(this.currentValue);
-                return;
-            }
-            const range = [closestDataPoint];
-            if (sliderValue < parseFloat(Object.keys(closestDataPoint)[0])) {
-                range.unshift(this.dataSet[dataSetIndex - 1]);
-            }
-            else {
-                range.push(this.dataSet[dataSetIndex + 1]);
-            }
-            const originalRangeStart = parseFloat(Object.keys(range[0])[0]);
-            const originalRangeEnd = parseFloat(Object.keys(range[1])[0]);
-            const originalRange = originalRangeEnd - originalRangeStart;
-            const overrideRangeStart = range[0][originalRangeStart];
-            const overrideRangeEnd = range[1][originalRangeEnd];
-            const overrideRange = overrideRangeEnd - overrideRangeStart;
-            const currentValue = (sliderValue - originalRangeStart) * (overrideRange / originalRange) + overrideRangeStart;
-            this.currentValue = Math.round(currentValue);
-            this.setSliderValue(this.currentValue);
-        };
-        /**
-         * Manual value input blur event handler.
-         * Checks whether the input is within the range of the slider.
-         * Updates the slider position and input value if the entered value is out of range.
-         * @param event blur event.
-         */
-        this.onInputBlur = (event) => {
-            let inputValue = parseFloat(event.target.value);
-            if (Number.isNaN(inputValue)) {
-                inputValue = this.minValue;
-            }
-            const dataSet = JSON.parse(JSON.stringify(this.dataSet));
-            const firstDataPoint = dataSet.shift();
-            const lastDataPoint = dataSet.pop();
-            if (inputValue < firstDataPoint[this.minValue]) {
-                this.currentValue = firstDataPoint[this.minValue];
-                this.sliderRef.value = Object.keys(firstDataPoint)[0];
-                this.setInputValue(firstDataPoint[this.minValue]);
-            }
-            const maxInputValue = Math.max(this.inputMaxValue, lastDataPoint[this.maxValue]);
-            if (inputValue > maxInputValue) {
-                this.currentValue = maxInputValue;
-                this.sliderRef.value = Object.keys(lastDataPoint)[0];
-                this.setInputValue(maxInputValue);
-            }
-            this.updateProgress();
-            this.sliderChange.emit(this.currentValue);
-        };
-        /**
-         * Slider change event handler.
-         * Depending on `lockToDataPoint` flag changes the slider value to the closest data point or emits `slider-change` event.
-         */
-        this.onSliderChange = () => {
-            if (this.lockToDataPoint) {
-                this.slideToClosestDataPoint();
-            }
-            else {
-                this.sliderChange.emit(this.currentValue);
-            }
-        };
-        /** Debounced slider change event. */
-        this.onSliderChangeDebounce = debounce(this.onSliderChange, 50);
-        /**
-         * Control previous button handler.
-         */
-        this.onControlPreviousClick = () => {
-            const closestDataPoint = this.getClosestOverrideDataPoint();
-            const closestDataPointValue = Object.values(closestDataPoint)[0];
-            const dataPointIndex = this.dataSet.indexOf(closestDataPoint);
-            let previousDataPoint = this.dataSet[dataPointIndex - 1];
-            if (dataPointIndex === 0) {
-                previousDataPoint = closestDataPoint;
-            }
-            if (this.currentValue > closestDataPointValue) {
-                previousDataPoint = closestDataPoint;
-            }
-            const previousDataPointValue = Object.values(previousDataPoint)[0];
-            this.currentValue = previousDataPointValue;
-            this.setSliderValue(previousDataPointValue);
-            this.updateProgress();
-            this.scrollToThumbCenter();
-            this.sliderChange.emit(this.currentValue);
-        };
-        /**
-         * Control next button handler.
-         */
-        this.onControlNextClick = () => {
-            const closestDataPoint = this.getClosestOverrideDataPoint();
-            const closestDataPointValue = Object.values(closestDataPoint)[0];
-            const dataPointIndex = this.dataSet.indexOf(closestDataPoint);
-            let nextDataPoint = this.dataSet[dataPointIndex + 1];
-            if (dataPointIndex + 1 === this.dataSet.length) {
-                nextDataPoint = closestDataPoint;
-            }
-            if (this.currentValue < closestDataPointValue) {
-                nextDataPoint = closestDataPoint;
-            }
-            const nextDataPointValue = Object.values(nextDataPoint)[0];
-            this.currentValue = nextDataPointValue;
-            this.setSliderValue(nextDataPointValue);
-            this.updateProgress();
-            this.scrollToThumbCenter();
-            this.sliderChange.emit(this.currentValue);
-        };
-        /**
-         * Slider pointer down event handler.
-         */
-        this.onSliderPointerDown = () => {
-            this.animateSliderThumb('normal');
-        };
-        /**
-         * Slider pointer up event handler.
-         */
-        this.onSliderPointerUp = () => {
-            this.animateSliderThumb('reverse');
-        };
-        /**
-         * Container touch start event handler.
-         */
-        this.onContainerTouchStart = () => {
-            this.isPointerDown = true;
-            this.animateSliderThumb('normal');
-        };
-        /**
-         * Container touch end event handler.
-         */
-        this.onContainerTouchEnd = () => {
-            this.isPointerDown = false;
-            this.animateSliderThumb('reverse');
-            this.onSliderChangeDebounce();
-        };
-        /**
-         * Initialises the mouse drag.
-         * @param {MouseEvent} e Current mouse event.
-         */
-        this.onContainerMouseDown = (e) => {
-            if (this.type !== 'secondary' || this.containerSize !== 'small') {
-                return;
-            }
-            this.isPointerDown = true;
-            this.positions = {
-                scrollLeft: this.sliderContainerRef.scrollLeft,
-                mouseX: e.clientX,
-            };
-            this.element.addEventListener('mousemove', this.onContainerMouseMove);
-            this.element.addEventListener('mouseup', this.onContainerMouseUp);
-            this.element.addEventListener('mouseleave', this.onContainerMouseUp);
-            this.animateSliderThumb('normal');
-        };
-        /**
-         * Scrolls the `sliderContainerRef` on mouse drag.
-         * @param {MouseEvent} e Current mouse event.
-         */
-        this.onContainerMouseMove = (e) => {
-            e.preventDefault();
-            const mouseButton = e.buttons;
-            this.isPointerDown = mouseButton === 1;
-            if (!this.isPointerDown) {
-                this.onContainerMouseUp();
-                return;
-            }
-            const deltaX = e.clientX - this.positions.mouseX;
-            this.sliderContainerRef.scrollTo(this.positions.scrollLeft - deltaX, 0);
-        };
-        /**
-         * Removes mouse drag events.
-         */
-        this.onContainerMouseUp = () => {
-            this.isPointerDown = false;
-            this.element.removeEventListener('mousemove', this.onContainerMouseMove);
-            this.element.removeEventListener('mouseup', this.onContainerMouseUp);
-            this.element.removeEventListener('mouseleave', this.onContainerMouseUp);
-            this.animateSliderThumb('reverse');
-            this.onSliderChangeDebounce();
-        };
-        /**
-         * Updates the progress track of the slider.
-         */
-        this.updateProgress = () => {
-            const progressTrack = this.progressTrackRef;
-            if (progressTrack === undefined) {
-                return;
-            }
-            let percent = this.getSliderPercent();
-            if (percent < 50) {
-                percent += 0.5;
-            }
-            progressTrack.style.width = percent + '%';
-            this.updateTooltipHandlePosition();
-        };
-        /**
-         * Updates the `tooltipHandleRef` position to mimick the sliders thumb position.
-         */
-        this.updateTooltipHandlePosition = () => {
-            const percent = this.getSliderPercent();
-            const sliderWidth = this.sliderRef.getBoundingClientRect().width;
-            const tooltipHandleWidth = this.tooltipHandleRef.getBoundingClientRect().width;
-            const positionLeft = (sliderWidth - tooltipHandleWidth) * (percent / 100) +
-                this.sliderRef.getBoundingClientRect().left -
-                this.element.getBoundingClientRect().left;
-            this.tooltipHandleRef.style.left = `${positionLeft}px`;
-            const handlePosition = this.tooltipHandleRef.getBoundingClientRect().x;
-            const handlePositionLeftRem = handlePosition / getRemSize();
-            const windowWidth = window.innerWidth;
-            const handlePositionRight = (windowWidth - handlePosition - tooltipHandleWidth) / getRemSize();
-            let tooltipOffset = 0;
-            if (handlePositionLeftRem < 1) {
-                tooltipOffset = 2;
-            }
-            else if (handlePositionLeftRem < 3) {
-                tooltipOffset = 3 - handlePositionLeftRem;
-            }
-            else if (handlePositionRight < 1) {
-                tooltipOffset = -2;
-            }
-            else if (handlePositionRight < 3) {
-                tooltipOffset = (3 - handlePositionRight) * -1;
-            }
-            this.tooltipOffset = tooltipOffset;
-        };
-        /**
-         * Gets the closest display value from the `dataSet`.
-         * @param value the value to check against. `currentValue` by default.
-         */
-        this.getClosestOverrideDataPoint = (value = this.currentValue) => {
-            return this.dataSet.reduce(function (prev, curr) {
-                return Math.abs(Object.values(curr)[0] - value) < Math.abs(Object.values(prev)[0] - value) ? curr : prev;
-            });
-        };
-        /**
-         * Gets the closest slider value from the `dataSet`.
-         * @param value the value to check against.
-         */
-        this.getClosestOriginalDataPoint = (value) => {
-            return this.dataSet.reduce(function (prev, curr) {
-                return Math.abs(parseFloat(Object.keys(curr)[0]) - value) < Math.abs(parseFloat(Object.keys(prev)[0]) - value)
-                    ? curr
-                    : prev;
-            });
-        };
-        /**
-         * Gets the current percent of the thumb position relative to the slider width.
-         * @returns {number}
-         */
-        this.getSliderPercent = () => {
-            const slider = this.sliderRef;
-            if (slider === null) {
-                return 0;
-            }
-            const range = this.maxValue - this.minValue;
-            const absoluteValue = parseFloat(slider.value) - this.minValue;
-            const sliderPercent = (absoluteValue / range) * 100;
-            return sliderPercent;
-        };
-        /**
-         * Gets the current display value for the toolip.
-         * @returns The display value for the tooltip.
-         */
-        this.getTooltipValue = () => {
-            if (this.type === 'secondary') {
-                return `${Object.values(this.getClosestOverrideDataPoint())[0]} ${this.dataUnits}`;
-            }
-            let tooltipValue = this.currentValue;
-            if (this.currentValue < this.minValue) {
-                tooltipValue = this.minValue;
-            }
-            if (this.currentValue > this.maxValue) {
-                tooltipValue = this.maxValue;
-            }
-            return `${tooltipValue} ${this.dataUnits}`;
-        };
-        /**
-         * Converts the display value of the slider to a slider value and updates slider position.
-         * @param value the display value.
-         */
-        this.setSliderValue = (value) => {
-            if (Number.isNaN(value)) {
-                value = this.minValue;
-            }
-            const dataSet = JSON.parse(JSON.stringify(this.dataSet));
-            const firstDataPoint = dataSet.shift();
-            const lastDataPoint = dataSet.pop();
-            if (value < firstDataPoint[this.minValue]) {
-                this.sliderRef.value = this.minValue.toString();
-                return;
-            }
-            if (value > lastDataPoint[this.maxValue]) {
-                this.sliderRef.value = this.maxValue.toString();
-                return;
-            }
-            const closestDataPoint = this.getClosestOverrideDataPoint(value);
-            const closestDataPointValue = Object.values(closestDataPoint)[0];
-            if (value === closestDataPointValue) {
-                this.sliderRef.value = Object.keys(closestDataPoint)[0];
-                return;
-            }
-            const dataSetIndex = this.dataSet.indexOf(closestDataPoint);
-            const range = [closestDataPoint];
-            if (value < closestDataPointValue) {
-                range.unshift(this.dataSet[dataSetIndex - 1]);
-            }
-            else {
-                range.push(this.dataSet[dataSetIndex + 1]);
-            }
-            const originalRangeStart = parseFloat(Object.keys(range[0])[0]);
-            const originalRangeEnd = parseFloat(Object.keys(range[1])[0]);
-            const originalRange = originalRangeEnd - originalRangeStart;
-            const overrideRangeStart = range[0][originalRangeStart];
-            const overrideRangeEnd = range[1][originalRangeEnd];
-            const overrideRange = overrideRangeEnd - overrideRangeStart;
-            const sliderValue = (value - overrideRangeStart) * (originalRange / overrideRange) + originalRangeStart;
-            this.sliderRef.value = sliderValue.toString();
-        };
-        /**
-         * Sets `containerSize` state depending on `element` width.
-         * Sets `sliderContainerRef` overflow style depending on `type` and `containerSize` states.
-         */
-        this.autoSetContainerSize = () => {
-            if (this.size !== 'auto') {
-                return;
-            }
-            let containerWidth = 0;
-            if (this.parentContainer.hasOwnProperty('innerWidth')) {
-                containerWidth = this.parentContainer.innerWidth;
-            }
-            else {
-                containerWidth = this.parentContainer.getBoundingClientRect().width;
-            }
-            if (containerWidth >= 1024) {
-                this.containerSize = 'large';
-            }
-            else if (containerWidth >= 768) {
-                this.containerSize = 'medium';
-            }
-            else {
-                this.containerSize = 'small';
-            }
-            if (this.sliderContainerRef === undefined) {
-                return;
-            }
-            if (this.type === 'secondary' && this.containerSize === 'small') {
-                this.sliderContainerRef.style.overflowX = 'scroll';
-                setTimeout(this.scrollToThumbCenter, 50);
-            }
-            else {
-                this.sliderContainerRef.style.overflowX = 'unset';
-            }
-        };
-        /**
-         * Sets the manual input value.
-         * @param value number to be displayed in the input.
-         */
-        this.setInputValue = (value) => {
-            this.inputRef.value = value.toString();
-        };
-        /**
-         * Gradually sets the slider value until it matches the closest `dataPoint` entry.
-         * Sets `isSliding` state.
-         */
-        this.slideToClosestDataPoint = () => {
-            if (this.isPointerDown) {
-                return;
-            }
-            const closestDataPoint = this.getClosestOverrideDataPoint();
-            const closestDataPointValue = Object.values(closestDataPoint)[0];
-            this.isSliding = true;
-            const interval = setInterval(() => {
-                const valueDelta = Math.abs(closestDataPointValue - this.currentValue);
-                this.scrollToThumbCenter();
-                if (!valueDelta) {
-                    clearInterval(interval);
-                    this.sliderChange.emit(this.currentValue);
-                    setTimeout(() => {
-                        this.isSliding = false;
-                    }, 50);
-                }
-                if (valueDelta < 5) {
-                    this.currentValue = closestDataPointValue;
-                    this.setSliderValue(closestDataPointValue);
-                    this.updateProgress();
-                    return;
-                }
-                let changeBy = 5;
-                if (valueDelta > 100) {
-                    changeBy = 10;
-                }
-                if (this.currentValue > closestDataPointValue) {
-                    this.currentValue = this.currentValue - changeBy;
-                    this.setSliderValue(this.currentValue);
-                }
-                if (this.currentValue < closestDataPointValue) {
-                    this.currentValue = this.currentValue + changeBy;
-                    this.setSliderValue(this.currentValue);
-                }
-                this.updateProgress();
-            }, 1);
-        };
-        /**
-         * Calculates the `dataSet` state from the provided `dataPoints`.
-         */
-        this.calculateDataSet = () => {
-            const dataSteps = this.dataPoints.length ? this.dataPoints.length : 2;
-            const dataPoints = this.dataPoints.length ? this.dataPoints : [this.minValue, this.maxValue];
-            const inputRange = this.maxValue - this.minValue;
-            const increment = inputRange / (dataSteps - 1);
-            this.dataSet.length = 0;
-            for (let index = 0; index < dataSteps; index++) {
-                this.dataSet.push({ [increment * index + this.minValue]: dataPoints[index] });
-            }
-        };
-        /**
-         * Scrolls `sliderContainerRef` to place slider thumb in the center of the screen.
-         */
-        this.scrollToThumbCenter = () => {
-            if (this.type !== 'secondary' || this.containerSize !== 'small') {
-                return;
-            }
-            const sliderWidth = this.sliderRef.getBoundingClientRect().width;
-            const thumbWidth = this.tooltipHandleRef.getBoundingClientRect().width;
-            const minScrollLeft = sliderWidth / 2 + thumbWidth / 2;
-            const maxScrollLeft = minScrollLeft + sliderWidth - thumbWidth;
-            const scrollRange = maxScrollLeft - minScrollLeft;
-            const sliderPercent = this.getSliderPercent();
-            this.sliderContainerRef.scrollLeft = minScrollLeft + (scrollRange * sliderPercent) / 100;
-        };
-        /**
-         * Animates the shadows of the slider thumb.
-         * @param {PlaybackDirection} direction sets the animation direction.
-         */
-        this.animateSliderThumb = (direction) => {
-            const shadowDefault = getComputedStyle(this.element).getPropertyValue('--slider-thumb-shadow');
-            const shadowActive = getComputedStyle(this.element).getPropertyValue('--slider-thumb-active-shadow');
-            if (direction === 'normal') {
-                this.tooltipHandleRef.classList.add('range-slider__tooltip-handle--active');
-            }
-            else {
-                this.tooltipHandleRef.classList.remove('range-slider__tooltip-handle--active');
-            }
-            this.tooltipHandleRef.animate([{ boxShadow: shadowDefault }, { boxShadow: 'none' }, { boxShadow: shadowActive }], {
-                duration: 300,
-                direction,
-            });
-        };
-        /** Renders a tick mark. */
-        this.renderTick = () => {
-            let tick = document.createElement('span');
-            tick.className = 'range-slider__tick';
-            this.tickContainerRef.appendChild(tick);
-        };
-        /** Renders data labels. */
-        this.renderDataLabels = () => {
-            const inputRange = this.maxValue - this.minValue;
-            this.dataLabelRef.innerHTML = '';
-            this.tickContainerRef.innerHTML = '';
-            for (const dataLabel of this.dataSet) {
-                const position = parseFloat(Object.keys(dataLabel)[0]);
-                const label = Object.values(dataLabel)[0];
-                const absolutePosition = position - this.minValue;
-                const relativePosition = (absolutePosition / inputRange) * 100;
-                this.renderTick();
-                if (this.displayDataPoints.length && !this.displayDataPoints.includes(label)) {
-                    continue;
-                }
-                this.dataLabelRef.appendChild(this.renderDataLabel(label.toString(), relativePosition));
-            }
-        };
-        /**
-         * Creates a data label node.
-         * @param label data label to be displayed.
-         * @param position position relative to the slider container.
-         * @returns {HTMLElement} representing data label.
-         */
-        this.renderDataLabel = (label, position) => {
-            const dataListItem = document.createElement('span');
-            const valueNode = document.createTextNode(label);
-            dataListItem.appendChild(valueNode);
-            dataListItem.classList.add('range-slider__data-label');
-            dataListItem.style.left = `calc(${position}% - 1.5rem)`;
-            return dataListItem;
-        };
         this.parentContainer = null;
         this.minValue = 1;
         this.maxValue = 500;
@@ -647,6 +33,19 @@ export class TetRangeSlider {
         this.isPointerDown = false;
         this.positions = { scrollLeft: 0, mouseX: 0 };
     }
+    inputRef;
+    sliderRef;
+    sliderContainerRef;
+    dataLabelRef;
+    tickContainerRef;
+    progressTrackRef;
+    tooltipHandleRef;
+    sliderResizeObserver;
+    element;
+    /** The event that is emitted on slider input. */
+    sliderInput;
+    /** The event that is emitted on slider change. */
+    sliderChange;
     /**
      * Watches for `dataPoints` mutations and updates `dataSet` and re-renders data labels.
      */
@@ -683,6 +82,315 @@ export class TetRangeSlider {
             this.containerSize = size;
         }
     }
+    /**
+     * Slider event handler.
+     * Updates progress bar.
+     * Calculates `currentValue`.
+     *
+     * @param event input event.
+     */
+    onSliderInput = (event) => {
+        this.updateProgress();
+        const inputValue = parseFloat(event.target.value);
+        const closestDataPoint = this.getClosestOriginalDataPoint(inputValue);
+        const closestValueIndex = this.dataSet.indexOf(closestDataPoint);
+        const originalValue = parseFloat(Object.keys(closestDataPoint)[0]);
+        const overrideValue = closestDataPoint[originalValue];
+        if (inputValue === originalValue) {
+            this.currentValue = overrideValue;
+            return;
+        }
+        const range = [closestDataPoint];
+        if (inputValue < originalValue) {
+            range.unshift(this.dataSet[closestValueIndex - 1]);
+        }
+        else {
+            range.push(this.dataSet[closestValueIndex + 1]);
+        }
+        const originalRangeStart = parseFloat(Object.keys(range[0])[0]);
+        const originalRangeEnd = parseFloat(Object.keys(range[1])[0]);
+        const originalRange = originalRangeEnd - originalRangeStart;
+        const overrideRangeStart = range[0][originalRangeStart];
+        const overrideRangeEnd = range[1][originalRangeEnd];
+        const overrideRange = overrideRangeEnd - overrideRangeStart;
+        let currentValue = (inputValue - originalRangeStart) * (overrideRange / originalRange) + overrideRangeStart;
+        if (currentValue > this.maxValue) {
+            currentValue = this.maxValue;
+        }
+        else if (currentValue < this.minValue) {
+            currentValue = this.minValue;
+        }
+        const decimals = this.getStepDecimals(this.step);
+        let snappedValue = Math.round(currentValue / this.step) * this.step;
+        snappedValue = parseFloat(snappedValue.toFixed(decimals));
+        this.currentValue = snappedValue;
+    };
+    /**
+     * Manual value input event handler.
+     * Updates slider position.
+     * @param event input event.
+     */
+    onInputChange = (event) => {
+        let inputValue = parseFloat(event.target.value);
+        if (Number.isNaN(inputValue)) {
+            inputValue = 0;
+        }
+        if (inputValue > this.inputMaxValue) {
+            inputValue = this.inputMaxValue;
+            event.target.value = this.inputMaxValue;
+        }
+        this.setSliderValue(inputValue);
+        this.currentValue = inputValue;
+        this.updateProgress();
+    };
+    /** Input keydown event listener.
+     *  Limits the input range to the defined `minValue` and `maxValue` values when using keyboard to increment values.
+     * @param {KeyboardEvent} event
+     */
+    onInputKeyDown = (event, ignoreHorizontalArrows = false) => {
+        const incrementKeyCodes = ['PageUp', 'ArrowUp', 'ArrowRight'];
+        const decrementKeyCodes = ['PageDown', 'ArrowDown', 'ArrowLeft'];
+        const keycode = event.code;
+        if (ignoreHorizontalArrows) {
+            incrementKeyCodes.pop();
+            decrementKeyCodes.pop();
+        }
+        if (incrementKeyCodes.includes(keycode)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (this.lockToDataPoint || keycode === 'PageUp') {
+                this.onControlNextClick();
+            }
+            else {
+                this.handleSliderArrowKeys('increment');
+            }
+        }
+        if (decrementKeyCodes.includes(keycode)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (this.lockToDataPoint || keycode === 'PageDown') {
+                this.onControlPreviousClick();
+            }
+            else {
+                this.handleSliderArrowKeys('decrement');
+            }
+        }
+        const keyCodes = incrementKeyCodes.concat(decrementKeyCodes);
+        if (keyCodes.includes(keycode)) {
+            setTimeout(() => this.sliderChange.emit(this.currentValue));
+        }
+    };
+    /**
+     * `sliderContainerRef` scroll listener.
+     * Updates slider values relative to the container scroll amount.
+     */
+    onContainerScroll = () => {
+        if (this.isSliding) {
+            return;
+        }
+        this.onSliderChangeDebounce();
+        let currentScroll = this.sliderContainerRef.scrollLeft;
+        const thumbWidth = this.tooltipHandleRef.getBoundingClientRect().width;
+        const sliderWidth = this.sliderRef.getBoundingClientRect().width;
+        const minScrollLeft = sliderWidth / 2 + thumbWidth / 2;
+        const maxScrollLeft = minScrollLeft + sliderWidth - thumbWidth;
+        if (currentScroll < minScrollLeft) {
+            currentScroll = minScrollLeft;
+        }
+        if (currentScroll > maxScrollLeft) {
+            currentScroll = maxScrollLeft;
+        }
+        currentScroll = Math.round(currentScroll * 100) / 100;
+        this.sliderContainerRef.scrollLeft = currentScroll;
+        const scrollRange = maxScrollLeft - minScrollLeft;
+        const sliderRange = this.maxValue - this.minValue;
+        const currentScrollInRange = currentScroll - minScrollLeft;
+        const currentScrollPercent = Math.round((currentScrollInRange / scrollRange) * 1000) / 1000;
+        const sliderValue = sliderRange * currentScrollPercent + this.minValue;
+        const closestDataPoint = this.getClosestOriginalDataPoint(sliderValue);
+        const dataSetIndex = this.dataSet.indexOf(closestDataPoint);
+        if (dataSetIndex === 0 && sliderValue < parseFloat(Object.keys(closestDataPoint)[0])) {
+            this.currentValue = Object.values(closestDataPoint)[0];
+            this.setSliderValue(this.currentValue);
+            return;
+        }
+        if (sliderValue === parseFloat(Object.keys(closestDataPoint)[0])) {
+            this.currentValue = Object.values(closestDataPoint)[0];
+            this.setSliderValue(this.currentValue);
+            return;
+        }
+        const range = [closestDataPoint];
+        if (sliderValue < parseFloat(Object.keys(closestDataPoint)[0])) {
+            range.unshift(this.dataSet[dataSetIndex - 1]);
+        }
+        else {
+            range.push(this.dataSet[dataSetIndex + 1]);
+        }
+        const originalRangeStart = parseFloat(Object.keys(range[0])[0]);
+        const originalRangeEnd = parseFloat(Object.keys(range[1])[0]);
+        const originalRange = originalRangeEnd - originalRangeStart;
+        const overrideRangeStart = range[0][originalRangeStart];
+        const overrideRangeEnd = range[1][originalRangeEnd];
+        const overrideRange = overrideRangeEnd - overrideRangeStart;
+        const currentValue = (sliderValue - originalRangeStart) * (overrideRange / originalRange) + overrideRangeStart;
+        this.currentValue = Math.round(currentValue);
+        this.setSliderValue(this.currentValue);
+    };
+    /**
+     * Manual value input blur event handler.
+     * Checks whether the input is within the range of the slider.
+     * Updates the slider position and input value if the entered value is out of range.
+     * @param event blur event.
+     */
+    onInputBlur = (event) => {
+        let inputValue = parseFloat(event.target.value);
+        if (Number.isNaN(inputValue)) {
+            inputValue = this.minValue;
+        }
+        const dataSet = JSON.parse(JSON.stringify(this.dataSet));
+        const firstDataPoint = dataSet.shift();
+        const lastDataPoint = dataSet.pop();
+        if (inputValue < firstDataPoint[this.minValue]) {
+            this.currentValue = firstDataPoint[this.minValue];
+            this.sliderRef.value = Object.keys(firstDataPoint)[0];
+            this.setInputValue(firstDataPoint[this.minValue]);
+        }
+        const maxInputValue = Math.max(this.inputMaxValue, lastDataPoint[this.maxValue]);
+        if (inputValue > maxInputValue) {
+            this.currentValue = maxInputValue;
+            this.sliderRef.value = Object.keys(lastDataPoint)[0];
+            this.setInputValue(maxInputValue);
+        }
+        this.updateProgress();
+        this.sliderChange.emit(this.currentValue);
+    };
+    /**
+     * Slider change event handler.
+     * Depending on `lockToDataPoint` flag changes the slider value to the closest data point or emits `slider-change` event.
+     */
+    onSliderChange = () => {
+        if (this.lockToDataPoint) {
+            this.slideToClosestDataPoint();
+        }
+        else {
+            this.sliderChange.emit(this.currentValue);
+        }
+    };
+    /** Debounced slider change event. */
+    onSliderChangeDebounce = debounce(this.onSliderChange, 50);
+    /**
+     * Control previous button handler.
+     */
+    onControlPreviousClick = () => {
+        const closestDataPoint = this.getClosestOverrideDataPoint();
+        const closestDataPointValue = Object.values(closestDataPoint)[0];
+        const dataPointIndex = this.dataSet.indexOf(closestDataPoint);
+        let previousDataPoint = this.dataSet[dataPointIndex - 1];
+        if (dataPointIndex === 0) {
+            previousDataPoint = closestDataPoint;
+        }
+        if (this.currentValue > closestDataPointValue) {
+            previousDataPoint = closestDataPoint;
+        }
+        const previousDataPointValue = Object.values(previousDataPoint)[0];
+        this.currentValue = previousDataPointValue;
+        this.setSliderValue(previousDataPointValue);
+        this.updateProgress();
+        this.scrollToThumbCenter();
+        this.sliderChange.emit(this.currentValue);
+    };
+    /**
+     * Control next button handler.
+     */
+    onControlNextClick = () => {
+        const closestDataPoint = this.getClosestOverrideDataPoint();
+        const closestDataPointValue = Object.values(closestDataPoint)[0];
+        const dataPointIndex = this.dataSet.indexOf(closestDataPoint);
+        let nextDataPoint = this.dataSet[dataPointIndex + 1];
+        if (dataPointIndex + 1 === this.dataSet.length) {
+            nextDataPoint = closestDataPoint;
+        }
+        if (this.currentValue < closestDataPointValue) {
+            nextDataPoint = closestDataPoint;
+        }
+        const nextDataPointValue = Object.values(nextDataPoint)[0];
+        this.currentValue = nextDataPointValue;
+        this.setSliderValue(nextDataPointValue);
+        this.updateProgress();
+        this.scrollToThumbCenter();
+        this.sliderChange.emit(this.currentValue);
+    };
+    /**
+     * Slider pointer down event handler.
+     */
+    onSliderPointerDown = () => {
+        this.animateSliderThumb('normal');
+    };
+    /**
+     * Slider pointer up event handler.
+     */
+    onSliderPointerUp = () => {
+        this.animateSliderThumb('reverse');
+    };
+    /**
+     * Container touch start event handler.
+     */
+    onContainerTouchStart = () => {
+        this.isPointerDown = true;
+        this.animateSliderThumb('normal');
+    };
+    /**
+     * Container touch end event handler.
+     */
+    onContainerTouchEnd = () => {
+        this.isPointerDown = false;
+        this.animateSliderThumb('reverse');
+        this.onSliderChangeDebounce();
+    };
+    /**
+     * Initialises the mouse drag.
+     * @param {MouseEvent} e Current mouse event.
+     */
+    onContainerMouseDown = (e) => {
+        if (this.type !== 'secondary' || this.containerSize !== 'small') {
+            return;
+        }
+        this.isPointerDown = true;
+        this.positions = {
+            scrollLeft: this.sliderContainerRef.scrollLeft,
+            mouseX: e.clientX,
+        };
+        this.element.addEventListener('mousemove', this.onContainerMouseMove);
+        this.element.addEventListener('mouseup', this.onContainerMouseUp);
+        this.element.addEventListener('mouseleave', this.onContainerMouseUp);
+        this.animateSliderThumb('normal');
+    };
+    /**
+     * Scrolls the `sliderContainerRef` on mouse drag.
+     * @param {MouseEvent} e Current mouse event.
+     */
+    onContainerMouseMove = (e) => {
+        e.preventDefault();
+        const mouseButton = e.buttons;
+        this.isPointerDown = mouseButton === 1;
+        if (!this.isPointerDown) {
+            this.onContainerMouseUp();
+            return;
+        }
+        const deltaX = e.clientX - this.positions.mouseX;
+        this.sliderContainerRef.scrollTo(this.positions.scrollLeft - deltaX, 0);
+    };
+    /**
+     * Removes mouse drag events.
+     */
+    onContainerMouseUp = () => {
+        this.isPointerDown = false;
+        this.element.removeEventListener('mousemove', this.onContainerMouseMove);
+        this.element.removeEventListener('mouseup', this.onContainerMouseUp);
+        this.element.removeEventListener('mouseleave', this.onContainerMouseUp);
+        this.animateSliderThumb('reverse');
+        this.onSliderChangeDebounce();
+    };
     /**
      * Initialises `dataSet` state from the provided `dataPoints`.
      */
@@ -711,6 +419,51 @@ export class TetRangeSlider {
         this.setSliderValue(this.currentValue);
         this.updateProgress();
     }
+    /**
+     * Updates the progress track of the slider.
+     */
+    updateProgress = () => {
+        const progressTrack = this.progressTrackRef;
+        if (progressTrack === undefined) {
+            return;
+        }
+        let percent = this.getSliderPercent();
+        if (percent < 50) {
+            percent += 0.5;
+        }
+        progressTrack.style.width = percent + '%';
+        this.updateTooltipHandlePosition();
+    };
+    /**
+     * Updates the `tooltipHandleRef` position to mimick the sliders thumb position.
+     */
+    updateTooltipHandlePosition = () => {
+        const percent = this.getSliderPercent();
+        const sliderWidth = this.sliderRef.getBoundingClientRect().width;
+        const tooltipHandleWidth = this.tooltipHandleRef.getBoundingClientRect().width;
+        const positionLeft = (sliderWidth - tooltipHandleWidth) * (percent / 100) +
+            this.sliderRef.getBoundingClientRect().left -
+            this.element.getBoundingClientRect().left;
+        this.tooltipHandleRef.style.left = `${positionLeft}px`;
+        const handlePosition = this.tooltipHandleRef.getBoundingClientRect().x;
+        const handlePositionLeftRem = handlePosition / getRemSize();
+        const windowWidth = window.innerWidth;
+        const handlePositionRight = (windowWidth - handlePosition - tooltipHandleWidth) / getRemSize();
+        let tooltipOffset = 0;
+        if (handlePositionLeftRem < 1) {
+            tooltipOffset = 2;
+        }
+        else if (handlePositionLeftRem < 3) {
+            tooltipOffset = 3 - handlePositionLeftRem;
+        }
+        else if (handlePositionRight < 1) {
+            tooltipOffset = -2;
+        }
+        else if (handlePositionRight < 3) {
+            tooltipOffset = (3 - handlePositionRight) * -1;
+        }
+        this.tooltipOffset = tooltipOffset;
+    };
     /**
      * Determines how many decimal places are present in the specified step value.
      *
@@ -746,6 +499,266 @@ export class TetRangeSlider {
         this.setSliderValue(value);
         this.updateProgress();
     }
+    /**
+     * Gets the closest display value from the `dataSet`.
+     * @param value the value to check against. `currentValue` by default.
+     */
+    getClosestOverrideDataPoint = (value = this.currentValue) => {
+        return this.dataSet.reduce(function (prev, curr) {
+            return Math.abs(Object.values(curr)[0] - value) < Math.abs(Object.values(prev)[0] - value) ? curr : prev;
+        });
+    };
+    /**
+     * Gets the closest slider value from the `dataSet`.
+     * @param value the value to check against.
+     */
+    getClosestOriginalDataPoint = (value) => {
+        return this.dataSet.reduce(function (prev, curr) {
+            return Math.abs(parseFloat(Object.keys(curr)[0]) - value) < Math.abs(parseFloat(Object.keys(prev)[0]) - value)
+                ? curr
+                : prev;
+        });
+    };
+    /**
+     * Gets the current percent of the thumb position relative to the slider width.
+     * @returns {number}
+     */
+    getSliderPercent = () => {
+        const slider = this.sliderRef;
+        if (slider === null) {
+            return 0;
+        }
+        const range = this.maxValue - this.minValue;
+        const absoluteValue = parseFloat(slider.value) - this.minValue;
+        const sliderPercent = (absoluteValue / range) * 100;
+        return sliderPercent;
+    };
+    /**
+     * Gets the current display value for the toolip.
+     * @returns The display value for the tooltip.
+     */
+    getTooltipValue = () => {
+        if (this.type === 'secondary') {
+            return `${Object.values(this.getClosestOverrideDataPoint())[0]} ${this.dataUnits}`;
+        }
+        let tooltipValue = this.currentValue;
+        if (this.currentValue < this.minValue) {
+            tooltipValue = this.minValue;
+        }
+        if (this.currentValue > this.maxValue) {
+            tooltipValue = this.maxValue;
+        }
+        return `${tooltipValue} ${this.dataUnits}`;
+    };
+    /**
+     * Converts the display value of the slider to a slider value and updates slider position.
+     * @param value the display value.
+     */
+    setSliderValue = (value) => {
+        if (Number.isNaN(value)) {
+            value = this.minValue;
+        }
+        const dataSet = JSON.parse(JSON.stringify(this.dataSet));
+        const firstDataPoint = dataSet.shift();
+        const lastDataPoint = dataSet.pop();
+        if (value < firstDataPoint[this.minValue]) {
+            this.sliderRef.value = this.minValue.toString();
+            return;
+        }
+        if (value > lastDataPoint[this.maxValue]) {
+            this.sliderRef.value = this.maxValue.toString();
+            return;
+        }
+        const closestDataPoint = this.getClosestOverrideDataPoint(value);
+        const closestDataPointValue = Object.values(closestDataPoint)[0];
+        if (value === closestDataPointValue) {
+            this.sliderRef.value = Object.keys(closestDataPoint)[0];
+            return;
+        }
+        const dataSetIndex = this.dataSet.indexOf(closestDataPoint);
+        const range = [closestDataPoint];
+        if (value < closestDataPointValue) {
+            range.unshift(this.dataSet[dataSetIndex - 1]);
+        }
+        else {
+            range.push(this.dataSet[dataSetIndex + 1]);
+        }
+        const originalRangeStart = parseFloat(Object.keys(range[0])[0]);
+        const originalRangeEnd = parseFloat(Object.keys(range[1])[0]);
+        const originalRange = originalRangeEnd - originalRangeStart;
+        const overrideRangeStart = range[0][originalRangeStart];
+        const overrideRangeEnd = range[1][originalRangeEnd];
+        const overrideRange = overrideRangeEnd - overrideRangeStart;
+        const sliderValue = (value - overrideRangeStart) * (originalRange / overrideRange) + originalRangeStart;
+        this.sliderRef.value = sliderValue.toString();
+    };
+    /**
+     * Sets `containerSize` state depending on `element` width.
+     * Sets `sliderContainerRef` overflow style depending on `type` and `containerSize` states.
+     */
+    autoSetContainerSize = () => {
+        if (this.size !== 'auto') {
+            return;
+        }
+        let containerWidth = 0;
+        if (this.parentContainer.hasOwnProperty('innerWidth')) {
+            containerWidth = this.parentContainer.innerWidth;
+        }
+        else {
+            containerWidth = this.parentContainer.getBoundingClientRect().width;
+        }
+        if (containerWidth >= 1024) {
+            this.containerSize = 'large';
+        }
+        else if (containerWidth >= 768) {
+            this.containerSize = 'medium';
+        }
+        else {
+            this.containerSize = 'small';
+        }
+        if (this.sliderContainerRef === undefined) {
+            return;
+        }
+        if (this.type === 'secondary' && this.containerSize === 'small') {
+            this.sliderContainerRef.style.overflowX = 'scroll';
+            setTimeout(this.scrollToThumbCenter, 50);
+        }
+        else {
+            this.sliderContainerRef.style.overflowX = 'unset';
+        }
+    };
+    /**
+     * Sets the manual input value.
+     * @param value number to be displayed in the input.
+     */
+    setInputValue = (value) => {
+        this.inputRef.value = value.toString();
+    };
+    /**
+     * Gradually sets the slider value until it matches the closest `dataPoint` entry.
+     * Sets `isSliding` state.
+     */
+    slideToClosestDataPoint = () => {
+        if (this.isPointerDown) {
+            return;
+        }
+        const closestDataPoint = this.getClosestOverrideDataPoint();
+        const closestDataPointValue = Object.values(closestDataPoint)[0];
+        this.isSliding = true;
+        const interval = setInterval(() => {
+            const valueDelta = Math.abs(closestDataPointValue - this.currentValue);
+            this.scrollToThumbCenter();
+            if (!valueDelta) {
+                clearInterval(interval);
+                this.sliderChange.emit(this.currentValue);
+                setTimeout(() => {
+                    this.isSliding = false;
+                }, 50);
+            }
+            if (valueDelta < 5) {
+                this.currentValue = closestDataPointValue;
+                this.setSliderValue(closestDataPointValue);
+                this.updateProgress();
+                return;
+            }
+            let changeBy = 5;
+            if (valueDelta > 100) {
+                changeBy = 10;
+            }
+            if (this.currentValue > closestDataPointValue) {
+                this.currentValue = this.currentValue - changeBy;
+                this.setSliderValue(this.currentValue);
+            }
+            if (this.currentValue < closestDataPointValue) {
+                this.currentValue = this.currentValue + changeBy;
+                this.setSliderValue(this.currentValue);
+            }
+            this.updateProgress();
+        }, 1);
+    };
+    /**
+     * Calculates the `dataSet` state from the provided `dataPoints`.
+     */
+    calculateDataSet = () => {
+        const dataSteps = this.dataPoints.length ? this.dataPoints.length : 2;
+        const dataPoints = this.dataPoints.length ? this.dataPoints : [this.minValue, this.maxValue];
+        const inputRange = this.maxValue - this.minValue;
+        const increment = inputRange / (dataSteps - 1);
+        this.dataSet.length = 0;
+        for (let index = 0; index < dataSteps; index++) {
+            this.dataSet.push({ [increment * index + this.minValue]: dataPoints[index] });
+        }
+    };
+    /**
+     * Scrolls `sliderContainerRef` to place slider thumb in the center of the screen.
+     */
+    scrollToThumbCenter = () => {
+        if (this.type !== 'secondary' || this.containerSize !== 'small') {
+            return;
+        }
+        const sliderWidth = this.sliderRef.getBoundingClientRect().width;
+        const thumbWidth = this.tooltipHandleRef.getBoundingClientRect().width;
+        const minScrollLeft = sliderWidth / 2 + thumbWidth / 2;
+        const maxScrollLeft = minScrollLeft + sliderWidth - thumbWidth;
+        const scrollRange = maxScrollLeft - minScrollLeft;
+        const sliderPercent = this.getSliderPercent();
+        this.sliderContainerRef.scrollLeft = minScrollLeft + (scrollRange * sliderPercent) / 100;
+    };
+    /**
+     * Animates the shadows of the slider thumb.
+     * @param {PlaybackDirection} direction sets the animation direction.
+     */
+    animateSliderThumb = (direction) => {
+        const shadowDefault = getComputedStyle(this.element).getPropertyValue('--slider-thumb-shadow');
+        const shadowActive = getComputedStyle(this.element).getPropertyValue('--slider-thumb-active-shadow');
+        if (direction === 'normal') {
+            this.tooltipHandleRef.classList.add('range-slider__tooltip-handle--active');
+        }
+        else {
+            this.tooltipHandleRef.classList.remove('range-slider__tooltip-handle--active');
+        }
+        this.tooltipHandleRef.animate([{ boxShadow: shadowDefault }, { boxShadow: 'none' }, { boxShadow: shadowActive }], {
+            duration: 300,
+            direction,
+        });
+    };
+    /** Renders a tick mark. */
+    renderTick = () => {
+        let tick = document.createElement('span');
+        tick.className = 'range-slider__tick';
+        this.tickContainerRef.appendChild(tick);
+    };
+    /** Renders data labels. */
+    renderDataLabels = () => {
+        const inputRange = this.maxValue - this.minValue;
+        this.dataLabelRef.innerHTML = '';
+        this.tickContainerRef.innerHTML = '';
+        for (const dataLabel of this.dataSet) {
+            const position = parseFloat(Object.keys(dataLabel)[0]);
+            const label = Object.values(dataLabel)[0];
+            const absolutePosition = position - this.minValue;
+            const relativePosition = (absolutePosition / inputRange) * 100;
+            this.renderTick();
+            if (this.displayDataPoints.length && !this.displayDataPoints.includes(label)) {
+                continue;
+            }
+            this.dataLabelRef.appendChild(this.renderDataLabel(label.toString(), relativePosition));
+        }
+    };
+    /**
+     * Creates a data label node.
+     * @param label data label to be displayed.
+     * @param position position relative to the slider container.
+     * @returns {HTMLElement} representing data label.
+     */
+    renderDataLabel = (label, position) => {
+        const dataListItem = document.createElement('span');
+        const valueNode = document.createTextNode(label);
+        dataListItem.appendChild(valueNode);
+        dataListItem.classList.add('range-slider__data-label');
+        dataListItem.style.left = `calc(${position}% - 1.5rem)`;
+        return dataListItem;
+    };
     render() {
         return (h(Host, { key: 'fe4d87f523c54b6d3bde6a4aeb062d3903571091' }, h("div", { key: 'c07051d59b5534b32df81830d998d874ed14fd8f', class: {
                 'range-slider': true,
@@ -757,21 +770,21 @@ export class TetRangeSlider {
             } }, h("div", { key: '6cf218ba806685aa060f835562f02c5b6cf9ace5', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", Object.assign({ key: '16067f25184f3b4a4a2dec1d3246b6f602e05985', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: 'ec4bd9cb5b732089c8b3a02f1892aef4a3af7a89', class: "range-slider__container" }, h("tet-button", Object.assign({ key: '02061d179102586b3518bb8e47b561311e82b9c2', theme: this.theme, iconMode: true, class: {
+            } }, h("tet-input", { key: '16067f25184f3b4a4a2dec1d3246b6f602e05985', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel, ...(this.containerSize !== 'large' ? { inputTabindex: 3 } : {}) })), h("div", { key: 'ec4bd9cb5b732089c8b3a02f1892aef4a3af7a89', class: "range-slider__container" }, h("tet-button", { key: '02061d179102586b3518bb8e47b561311e82b9c2', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--left': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: 'f69c0f996709d6d4ee780b3b3601da2aecb0ef53', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '163bc4c424eb02a14f4aa5af3cb8dc15a95e8323', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '87faebff4efc96466b045cb30e2195aca1e7b125', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: '395e6b19348b9db47c6a01e5e62d38540e15b631', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: 'ce03add3fa4235f1dc1dec6ee4c2249b7c6ab411', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'b5fbdc67265f9bc567f193994f8d5bd8000a3cec', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'c7144b949d09573c4e2f446f80b54f0ba28ba854', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '576ed7c7f3e9d892eb19e74f61f229ea62383c63', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, clickCallback: this.onControlPreviousClick, ...(this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 2 } : {}) }, h("tet-icon", { key: 'f69c0f996709d6d4ee780b3b3601da2aecb0ef53', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '163bc4c424eb02a14f4aa5af3cb8dc15a95e8323', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '87faebff4efc96466b045cb30e2195aca1e7b125', class: "range-slider__slider-wrapper" }, h("input", { key: '395e6b19348b9db47c6a01e5e62d38540e15b631', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider", ...(this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 1 } : {}) })), h("div", { key: 'ce03add3fa4235f1dc1dec6ee4c2249b7c6ab411', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'b5fbdc67265f9bc567f193994f8d5bd8000a3cec', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'c7144b949d09573c4e2f446f80b54f0ba28ba854', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '576ed7c7f3e9d892eb19e74f61f229ea62383c63', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
             } })), h("div", { key: 'a479431596824a05d55a8775f73c9e7071950e3a', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: 'e2c0a91402037601d8865476ae2d25623d0083bd', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: 'cf187a5376842141b09291db7029842e1b14577c', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '0a41fc6a3c162e1a2eb907551f592c58865c9836', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: '06d21777945c8f42f83179546a35e6a3112d6bca', theme: this.theme, iconMode: true, class: {
+            } }, h("div", { key: 'e2c0a91402037601d8865476ae2d25623d0083bd', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: 'cf187a5376842141b09291db7029842e1b14577c', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '0a41fc6a3c162e1a2eb907551f592c58865c9836', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", { key: '06d21777945c8f42f83179546a35e6a3112d6bca', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--right': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: '35a49113a21c71b1f79f871597c2feeb7ae112e1', name: "add", class: "range-slider__control--icon" }))))));
+            }, clickCallback: this.onControlNextClick, ...(this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 4 } : {}) }, h("tet-icon", { key: '35a49113a21c71b1f79f871597c2feeb7ae112e1', name: "add", class: "range-slider__control--icon" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }