@siemens/ix 0.0.0-20240419081748

package/dist/collection/components/slider/slider.css

@@ -0,0 +1,265 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: flex;
+  flex-direction: column;
+  min-height: 2rem;
+  --thumb-size: 1rem;
+  --value: 0;
+  --trace-start: 0;
+  --trace-end: 0;
+  --trace-reference: 0;
+  --trace-reference-color: var(--theme-color-8);
+  --trace-color: var(--theme-color-dynamic);
+  --tick-color: var(--theme-color-8);
+  --tick-color--active: var(--theme-color-dynamic);
+  --track-color: var(--theme-color-component-4);
+  /* style datalist */
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host input[type=range] {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  cursor: pointer;
+  width: 100%;
+  height: 1rem;
+  margin: 0;
+}
+:host input[type=range].trace::before {
+  content: "";
+  position: absolute;
+  display: block;
+  z-index: -1;
+  width: calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));
+  left: calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));
+  height: 4px;
+  background-color: var(--trace-color);
+  top: 50%;
+  transform: translateY(-50%);
+}
+:host input[type=range].trace::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 2px;
+  height: 16px;
+  background-color: var(--trace-reference-color);
+  top: 50%;
+  transform: translateY(-50%);
+  left: calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference));
+}
+:host input[type=range]::-webkit-slider-runnable-track {
+  background: transparent;
+  height: 0.25rem;
+}
+:host input[type=range]::-moz-range-track {
+  background: transparent;
+  height: 0.25rem;
+}
+:host input[type=range i]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: -6px;
+}
+:host input[type=range i]::-moz-range-thumb {
+  border: none;
+  border-radius: 0;
+}
+:host input[type=range]::-webkit-slider-thumb {
+  border-radius: 100px;
+  background-color: var(--theme-color-dynamic);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  -webkit-transition: all var(--theme-default-time) ease-in-out;
+  transition: all var(--theme-default-time) ease-in-out;
+  z-index: 10;
+}
+:host input[type=range]::-moz-range-thumb {
+  border-radius: 100px;
+  background-color: var(--theme-color-dynamic);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  -moz-transition: all var(--theme-default-time) ease-in-out;
+  transition: all var(--theme-default-time) ease-in-out;
+  z-index: 10;
+}
+:host input[type=range]:hover::-webkit-slider-thumb {
+  transform: scale(1.2);
+  background-color: var(--theme-color-dynamic);
+}
+:host input[type=range]:hover::-moz-range-thumb {
+  transform: scale(1.2);
+  background-color: var(--theme-color-dynamic);
+}
+:host input[type=range]:active::-webkit-slider-thumb {
+  transform: scale(1.2);
+  background-color: var(--theme-color-dynamic);
+}
+:host input[type=range]:active::-moz-range-thumb {
+  transform: scale(1.2);
+  background-color: var(--theme-color-dynamic);
+}
+:host input[type=range]:focus {
+  outline: none;
+}
+:host input[type=range]:focus-visible::-webkit-slider-thumb {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: 0.125rem;
+}
+:host input[type=range]:focus-visible::-moz-range-thumb {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: 0.125rem;
+}
+:host .ticks {
+  display: flex;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+:host .ticks .tick {
+  display: block;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--tick-color);
+  border-radius: 100px;
+  top: 50%;
+  transform: translateY(-50%);
+  left: calc(var(--tick-value) * 100% - 4px);
+}
+:host .ticks .tick.tick-active {
+  background-color: var(--tick-color--active);
+}
+:host .slider {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 1.5rem;
+}
+:host .track {
+  position: absolute;
+  background-color: var(--track-color);
+  height: 4px;
+  width: calc(100% - 1rem);
+  margin-left: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0px;
+}
+:host .thumb {
+  display: block;
+  position: absolute;
+  background-color: transparent;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 100px;
+  left: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+:host .hide-tooltip {
+  display: none;
+}
+:host .label {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 0.5rem;
+  min-height: 0px;
+}
+:host .label-start {
+  margin-left: 0.5rem;
+}
+:host .label-end {
+  margin-right: 0.5rem;
+}
+:host .label-error {
+  margin-left: 0.5rem;
+}
+
+:host(.error) {
+  --trace-color: var(--theme-color-alarm-40);
+  --tick-color--active: var(--theme-color-alarm);
+}
+:host(.error) input[type=range]::-webkit-slider-thumb {
+  background-color: var(--theme-color-alarm);
+}
+:host(.error) input[type=range]::-moz-range-thumb {
+  background-color: var(--theme-color-alarm);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+  --track-color: var(--theme-color-component-3);
+  --trace-color: var(--theme-color-3);
+  --tick-color: var(--theme-color-7);
+  --tick-color--active: var(--theme-color-7);
+}
+:host(.disabled) input[type=range]::-webkit-slider-thumb {
+  background-color: var(--theme-color-7);
+}
+:host(.disabled) input[type=range]::-moz-range-thumb {
+  background-color: var(--theme-color-7);
+}

package/dist/collection/components/slider/slider.js

@@ -0,0 +1,386 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h, Host, } from "@stencil/core";
+import { a11yHostAttributes } from "../utils/a11y";
+import { OnListener } from "../utils/listener";
+function between(min, value, max) {
+    if (value < min) {
+        return min;
+    }
+    else if (value > max) {
+        return max;
+    }
+    else {
+        return value;
+    }
+}
+/**
+ * @since 2.0.0
+ *
+ * @slot label-start - Element will be displayed at the start of the slider
+ * @slot label-end - Element will be displayed at the end of the slider
+ */
+export class Slider {
+    constructor() {
+        this.step = undefined;
+        this.min = 0;
+        this.max = 100;
+        this.value = 0;
+        this.marker = undefined;
+        this.trace = false;
+        this.traceReference = 0;
+        this.disabled = false;
+        this.error = undefined;
+        this.rangeInput = 0;
+        this.rangeMin = 0;
+        this.rangeMax = 100;
+        this.rangeTraceReference = 0;
+        this.showTooltip = false;
+    }
+    get tooltip() {
+        return this.hostElement.shadowRoot.querySelector('ix-tooltip');
+    }
+    get pseudoThumb() {
+        return this.hostElement.shadowRoot.querySelector('.thumb');
+    }
+    get slider() {
+        return this.hostElement.shadowRoot.getElementById('slider');
+    }
+    onShowTooltipChange() {
+        if (this.showTooltip) {
+            this.tooltip.showTooltip(this.pseudoThumb);
+            return;
+        }
+        this.tooltip.hideTooltip();
+    }
+    componentWillLoad() {
+        this.a11yAttributes = a11yHostAttributes(this.hostElement, [
+            'role',
+            'aria-valuemin',
+            'aria-valuemax',
+            'aria-valuenow',
+        ]);
+        this.updateRangeVariables();
+    }
+    updateRangeVariables() {
+        this.rangeInput = between(this.min, this.value, this.max);
+        this.rangeTraceReference = between(this.min, this.traceReference, this.max);
+        this.rangeMin = Math.min(this.min, this.max);
+        this.rangeMax = Math.max(this.min, this.max);
+    }
+    onInput(event) {
+        event.stopPropagation();
+        const value = parseInt(this.slider.value);
+        if (!isNaN(value)) {
+            this.rangeInput = value;
+            this.emitInputEvent();
+        }
+    }
+    emitInputEvent() {
+        this.valueChange.emit(this.rangeInput);
+    }
+    isMarkerActive(markerValue) {
+        const start = Math.min(this.traceReference, this.rangeInput);
+        const end = Math.max(this.traceReference, this.rangeInput);
+        const value = markerValue;
+        return value >= start && value <= end;
+    }
+    // Listen globally on window because sometimes the event listener
+    // of the DOM element input itself is not called if the release
+    // click is not inside the element anymore
+    onPointerUp() {
+        this.showTooltip = false;
+    }
+    render() {
+        const range = this.rangeMax - this.rangeMin;
+        let traceReferenceInPercentage = (this.rangeTraceReference - this.rangeMin) / range;
+        let valueInPercentage = (this.rangeInput - this.rangeMin) / range;
+        const distance = valueInPercentage - traceReferenceInPercentage;
+        let traceStart = traceReferenceInPercentage;
+        let traceEnd = valueInPercentage;
+        if (distance <= 0) {
+            traceStart = valueInPercentage;
+            traceEnd = traceReferenceInPercentage;
+        }
+        return (h(Host, { key: 'fc1ccd48aeefe6a53f7299db447b5c5e6fb6b13d', class: {
+                disabled: this.disabled,
+                error: !!this.error,
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("div", { key: '4e3d3b0d5e1b2a2882ce0073336e4cd13ac1a4b8', class: "slider" }, h("div", { key: 'f8457c6d8efad8d172abe49f9037cb71f9ba226f', class: "track" }, h("div", { key: 'cf141d91936a74657f8788f5f7c688e37ebf7a16', class: "thumb", style: {
+                left: `calc(${valueInPercentage} * 100% - 8px)`,
+            } }), h("div", { key: 'b54ae34bda82b7f0277ae361c5139845830dc85d', class: "ticks" }, this.marker
+            ? this.marker.map((markerValue) => {
+                if (markerValue > this.max || markerValue < this.min) {
+                    return;
+                }
+                let left = (markerValue - this.rangeMin) / range;
+                return (h("div", { class: {
+                        tick: true,
+                        'tick-active': this.isMarkerActive(markerValue) && this.trace,
+                    }, style: {
+                        '--tick-value': `${left}`,
+                    } }));
+            })
+            : null)), h("input", Object.assign({ key: '219884ecfc35a76f0722782af2607c64b19a57aa', id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
+                '--value': `${valueInPercentage}`,
+                '--trace-reference': `${traceReferenceInPercentage}`,
+                '--trace-start': `${traceStart}`,
+                '--trace-end': `${traceEnd}`,
+            }, class: {
+                trace: this.trace && traceReferenceInPercentage !== valueInPercentage,
+            }, onFocus: () => {
+                this.showTooltip = true;
+            }, onBlur: () => {
+                this.showTooltip = false;
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { key: '387dc09d28b3c45f08470ba651c659e8c528a44d', class: {
+                'hide-tooltip': !this.showTooltip,
+            }, animationFrame: true }, this.rangeInput)), h("div", { key: 'f8fdb048411a622870b4b0698c7124f7e175dedf', class: "label" }, h("div", { key: '2bbb6c7418953b907b1ef604a8d775c1e69d6626', class: "label-start" }, h("slot", { key: 'ce4a5aedbfafe7b5b71d47421bae0ab385548920', name: "label-start" })), h("div", { key: '98b40f2b68164592307f7f9817c913dffcb08139', class: "label-end" }, h("slot", { key: 'bcd3497745bf949da88cd373ecf8cd3f74488ffe', name: "label-end" }))), this.error ? (h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
+    }
+    static get is() { return "ix-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["slider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step"
+                        }],
+                    "text": "Legal number intervals"
+                },
+                "attribute": "step",
+                "reflect": false
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum slider value"
+                },
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum slider value"
+                },
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value of the slider"
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "marker": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderMarker",
+                    "resolved": "number[]",
+                    "references": {
+                        "SliderMarker": {
+                            "location": "local",
+                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/slider/slider.tsx",
+                            "id": "src/components/slider/slider.tsx::SliderMarker"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define tick marker on the slider. Marker has to be within slider min/max"
+                }
+            },
+            "trace": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a trace line"
+                },
+                "attribute": "trace",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "traceReference": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the start point of the trace line"
+                },
+                "attribute": "trace-reference",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show control as disabled"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show error state and message"
+                },
+                "attribute": "error",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "rangeInput": {},
+            "rangeMin": {},
+            "rangeMax": {},
+            "rangeTraceReference": {},
+            "showTooltip": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "showTooltip",
+                "methodName": "onShowTooltipChange"
+            }, {
+                "propName": "value",
+                "methodName": "updateRangeVariables"
+            }, {
+                "propName": "max",
+                "methodName": "updateRangeVariables"
+            }, {
+                "propName": "min",
+                "methodName": "updateRangeVariables"
+            }, {
+                "propName": "traceReference",
+                "methodName": "updateRangeVariables"
+            }];
+    }
+}
+__decorate([
+    OnListener('pointerup', (self) => self.showTooltip)
+], Slider.prototype, "onPointerUp", null);
+//# sourceMappingURL=slider.js.map

package/dist/collection/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\n\nexport type SliderMarker = Array<number>;\n\nfunction between(min: number, value: number, max: number) {\n  if (value < min) {\n    return min;\n  } else if (value > max) {\n    return max;\n  } else {\n    return value;\n  }\n}\n\n/**\n * @since 2.0.0\n *\n * @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n */\n@Component({\n  tag: 'ix-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class Slider {\n  @Element() hostElement!: HTMLIxSliderElement;\n\n  /**\n   * Legal number intervals\n   *\n   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n   */\n  @Prop() step: number;\n\n  /**\n   * Minimum slider value\n   */\n  @Prop() min = 0;\n\n  /**\n   * Maximum slider value\n   */\n  @Prop() max = 100;\n\n  /**\n   * Current value of the slider\n   */\n  @Prop() value = 0;\n\n  /**\n   * Define tick marker on the slider. Marker has to be within slider min/max\n   */\n  @Prop() marker: SliderMarker;\n\n  /**\n   * Show a trace line\n   */\n  @Prop() trace = false;\n\n  /**\n   * Define the start point of the trace line\n   */\n  @Prop() traceReference = 0;\n\n  /**\n   * Show control as disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Show error state and message\n   */\n  @Prop() error: boolean | string;\n\n  /**\n   *\n   */\n  @Event() valueChange: EventEmitter<number>;\n\n  @State() rangeInput = 0;\n  @State() rangeMin = 0;\n  @State() rangeMax = 100;\n  @State() rangeTraceReference = 0;\n  @State() showTooltip = false;\n\n  private a11yAttributes: A11yAttributes;\n\n  get tooltip() {\n    return this.hostElement.shadowRoot.querySelector('ix-tooltip');\n  }\n\n  get pseudoThumb() {\n    return this.hostElement.shadowRoot.querySelector('.thumb') as HTMLElement;\n  }\n\n  get slider() {\n    return this.hostElement.shadowRoot.getElementById(\n      'slider'\n    ) as HTMLInputElement;\n  }\n\n  @Watch('showTooltip')\n  onShowTooltipChange() {\n    if (this.showTooltip) {\n      this.tooltip.showTooltip(this.pseudoThumb);\n      return;\n    }\n\n    this.tooltip.hideTooltip();\n  }\n\n  componentWillLoad() {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n      'role',\n      'aria-valuemin',\n      'aria-valuemax',\n      'aria-valuenow',\n    ]);\n    this.updateRangeVariables();\n  }\n\n  @Watch('value')\n  @Watch('max')\n  @Watch('min')\n  @Watch('traceReference')\n  private updateRangeVariables() {\n    this.rangeInput = between(this.min, this.value, this.max);\n    this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n    this.rangeMin = Math.min(this.min, this.max);\n    this.rangeMax = Math.max(this.min, this.max);\n  }\n\n  private onInput(event: InputEvent) {\n    event.stopPropagation();\n    const value = parseInt(this.slider.value);\n\n    if (!isNaN(value)) {\n      this.rangeInput = value;\n      this.emitInputEvent();\n    }\n  }\n\n  private emitInputEvent() {\n    this.valueChange.emit(this.rangeInput);\n  }\n\n  private isMarkerActive(markerValue: number) {\n    const start = Math.min(this.traceReference, this.rangeInput);\n    const end = Math.max(this.traceReference, this.rangeInput);\n    const value = markerValue;\n\n    return value >= start && value <= end;\n  }\n\n  // Listen globally on window because sometimes the event listener\n  // of the DOM element input itself is not called if the release\n  // click is not inside the element anymore\n  @OnListener<Slider>('pointerup', (self) => self.showTooltip)\n  onPointerUp() {\n    this.showTooltip = false;\n  }\n\n  render() {\n    const range = this.rangeMax - this.rangeMin;\n\n    let traceReferenceInPercentage =\n      (this.rangeTraceReference - this.rangeMin) / range;\n\n    let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n    const distance = valueInPercentage - traceReferenceInPercentage;\n\n    let traceStart = traceReferenceInPercentage;\n    let traceEnd = valueInPercentage;\n\n    if (distance <= 0) {\n      traceStart = valueInPercentage;\n      traceEnd = traceReferenceInPercentage;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          error: !!this.error,\n        }}\n        onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n      >\n        <div class=\"slider\">\n          <div class=\"track\">\n            <div\n              class=\"thumb\"\n              style={{\n                left: `calc(${valueInPercentage} * 100% - 8px)`,\n              }}\n            ></div>\n            <div class=\"ticks\">\n              {this.marker\n                ? this.marker.map((markerValue) => {\n                    if (markerValue > this.max || markerValue < this.min) {\n                      return;\n                    }\n\n                    let left = (markerValue - this.rangeMin) / range;\n\n                    return (\n                      <div\n                        class={{\n                          tick: true,\n                          'tick-active':\n                            this.isMarkerActive(markerValue) && this.trace,\n                        }}\n                        style={{\n                          '--tick-value': `${left}`,\n                        }}\n                      ></div>\n                    );\n                  })\n                : null}\n            </div>\n          </div>\n\n          <input\n            id=\"slider\"\n            type=\"range\"\n            list={this.marker ? 'markers' : undefined}\n            step={this.step}\n            min={this.min}\n            max={this.max}\n            value={this.rangeInput}\n            tabindex={this.disabled ? -1 : 0}\n            onInput={(event) => this.onInput(event)}\n            style={{\n              '--value': `${valueInPercentage}`,\n              '--trace-reference': `${traceReferenceInPercentage}`,\n              '--trace-start': `${traceStart}`,\n              '--trace-end': `${traceEnd}`,\n            }}\n            class={{\n              trace:\n                this.trace && traceReferenceInPercentage !== valueInPercentage,\n            }}\n            onFocus={() => {\n              this.showTooltip = true;\n            }}\n            onBlur={() => {\n              this.showTooltip = false;\n            }}\n            role=\"slider\"\n            aria-valuenow={this.rangeInput}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n            {...this.a11yAttributes}\n          />\n\n          <ix-tooltip\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n          >\n            {this.rangeInput}\n          </ix-tooltip>\n        </div>\n        <div class=\"label\">\n          <div class=\"label-start\">\n            <slot name=\"label-start\"></slot>\n          </div>\n          <div class=\"label-end\">\n            <slot name=\"label-end\"></slot>\n          </div>\n        </div>\n        {this.error ? (\n          <ix-typography class={'label-error'} color=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}