wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/slider-continuous/vds-basic-slider-continuous.js

@@ -1,56 +1,224 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { forceUpdate } from "@stencil/core/internal";
-import { getPositionBasedOnValue, getTrackFillBasedOnValue, logWarnings } from "../../utils/slider.utils";
+import { getPositionBasedOnValue, getTrackFillBasedOnValue, logWarnings, valueToPercentage, buildStepMarks, parseMarks, getLimitLabels, normalizeValue } from "../../utils/slider.utils";
 import { emitInputEvent } from "../../utils/form";
+/**
+ * @component vds-basic-slider-continuous
+ * @description A continuous slider component for selecting numeric values from a range. Supports horizontal and vertical orientations, custom marks, value labels, step increments, and custom theming. Form-associated for native form integration.
+ *
+ * @example
+ * <!-- Basic slider with default range 0-100 -->
+ * <vds-basic-slider-continuous
+ *   value="50">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Large slider with custom range -->
+ * <vds-basic-slider-continuous
+ *   value="25"
+ *   min-value="0"
+ *   max-value="50"
+ *   size="large">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider with step increment -->
+ * <vds-basic-slider-continuous
+ *   value="20"
+ *   min-value="0"
+ *   max-value="100"
+ *   step="10">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Vertical slider -->
+ * <vds-basic-slider-continuous
+ *   value="60"
+ *   orientation="vertical"
+ *   style="height: 300px;">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider without value label -->
+ * <vds-basic-slider-continuous
+ *   value="30"
+ *   display-label="off">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider with auto label (shows on hover) -->
+ * <vds-basic-slider-continuous
+ *   value="75"
+ *   display-label="auto">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider without limit labels -->
+ * <vds-basic-slider-continuous
+ *   value="40"
+ *   display-limits="false">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Disabled slider -->
+ * <vds-basic-slider-continuous
+ *   value="50"
+ *   disabled="true">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider with custom marks -->
+ * <vds-basic-slider-continuous
+ *   value="50"
+ *   show-marks="true"
+ *   marks='[{"value": 0, "label": "Start"}, {"value": 50, "label": "Middle"}, {"value": 100, "label": "End"}]'>
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider with step marks -->
+ * <vds-basic-slider-continuous
+ *   value="40"
+ *   min-value="0"
+ *   max-value="100"
+ *   step="20"
+ *   show-marks="true">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider with custom colors -->
+ * <vds-basic-slider-continuous
+ *   value="65"
+ *   colors='{"Track": "grey-200", "TrackFill": "primary-500", "Thumb": "primary-700"}'>
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Volume control slider -->
+ * <div style="display: flex; align-items: center; gap: 1rem;">
+ *   <vds-icon svg-icon="mute"></vds-icon>
+ *   <vds-basic-slider-continuous
+ *     id="volume"
+ *     value="50"
+ *     min-value="0"
+ *     max-value="100"
+ *     set-aria-label="Volume control">
+ *   </vds-basic-slider-continuous>
+ *   <vds-icon svg-icon="unmute"></vds-icon>
+ * </div>
+ *
+ * @example
+ * <!-- Temperature slider with event handling -->
+ * <div>
+ *   <label>Temperature: <span id="temp-value">20</span>°C</label>
+ *   <vds-basic-slider-continuous
+ *     id="temperature"
+ *     value="20"
+ *     min-value="10"
+ *     max-value="30"
+ *     step="0.5"
+ *     set-aria-label="Temperature control">
+ *   </vds-basic-slider-continuous>
+ * </div>
+ * <script>
+ *   const slider = document.getElementById('temperature');
+ *   const display = document.getElementById('temp-value');
+ *   slider.addEventListener('changeInput', (e) => {
+ *     display.textContent = e.detail;
+ *   });
+ * </script>
+ */
 export class VdsBasicSliderContinuous {
     constructor() {
-        /** Sets the size of the slider. */
+        /**
+         * Sets the size of the slider
+         * @type {"medium" | "large"}
+         * @default "medium"
+         */
         this.size = "medium";
-        /** Sets the slider’s orientation. */
+        /**
+         * Sets the slider's orientation
+         * @type {"horizontal" | "vertical"}
+         * @default "horizontal"
+         */
         this.orientation = "horizontal";
-        /** Sets the slider on disabled state. */
+        /**
+         * Sets the slider on disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Sets the min value of the slider (Min value should always be lower than the max value). */
+        /**
+         * Sets the min value of the slider (Min value should always be lower than the max value)
+         * @type {number}
+         * @default 0
+         */
         this.minValue = 0;
-        /** Sets the max value of the slider..*/
+        /**
+         * Sets the max value of the slider
+         * @type {number}
+         * @default 100
+         */
         this.maxValue = 100;
-        /** Toggles the value over the thumb in the slider
-        * on - Always shows value over the thumb.
-        * off - Do not show the value over the thumb.
-        * auto - Shows value over the thumb when mouse hover.
-        */
+        /**
+         * Toggles the value over the thumb in the slider
+         * - on: Always shows value over the thumb
+         * - off: Do not show the value over the thumb
+         * - auto: Shows value over the thumb when mouse hover
+         * @type {"on" | "off" | "auto"}
+         * @default "on"
+         */
         this.displayLabel = "on";
-        /** Toggles the limit value (min and max) of the slider .*/
+        /**
+         * Toggles the limit value (min and max) of the slider
+         * @type {boolean}
+         * @default true
+         */
         this.displayLimits = true;
-        /** Sets the thumb icon */
+        /**
+         * Sets the thumb icon
+         * @type {string}
+         * @default "thumb"
+         */
         this.icon = "thumb";
+        /**
+         * Show / Hide marks in the slider track
+         * @type {boolean}
+         * @default false
+         */
+        this.showMarks = false;
     }
+    /**
+     * Component lifecycle hook - logs warnings and sets default values
+     * @private
+     */
     componentWillRender() {
-        logWarnings(this.value, this.maxValue, this.minValue);
+        logWarnings(this.value, this.maxValue, this.minValue, this.step);
         this.setDefaultValues();
     }
-    componentDidRender() {
-        this.setOutboundValues();
-    }
+    /**
+     * Component lifecycle hook - sets input value and thumb position
+     * @private
+     */
     componentDidLoad() {
         this.setInputValue();
         this.setThumbPositionOnFirstLoad();
     }
     /**
-     * Sets the slider value to the specified value.
-     *
-     * @param {number} value - The new value for the slider.
-     * @returns {Promise<void>} A promise that resolves when the value is set.
+     * Sets the slider value to the specified value
+     * @method
+     * @public
+     * @param {number} value - The new value for the slider
+     * @returns {Promise<void>} A promise that resolves when the value is set
      */
     setValue(value) {
-        this.value = value;
+        this.value = normalizeValue(value, this.minValue, this.maxValue, this.step);
         return Promise.resolve();
     }
     /**
-     * Clears the slider value by setting it to the minimum value.
-     *
-     * @returns {Promise<void>} A promise that resolves when the value is cleared.
+     * Clears the slider value by setting it to the minimum value
+     * @method
+     * @public
+     * @returns {Promise<void>} A promise that resolves when the value is cleared
      */
     clear() {
         this.value = this.minValue;
@@ -60,16 +228,17 @@ export class VdsBasicSliderContinuous {
      * Sets slider value, shownValue and internals value for forms.
      * Calculates the thumb position based on the value.
      * Sets the track fill percentage.
-     *
-     * @returns {void}
+     * @private
      */
     setInputValue() {
-        if (this.value === null || this.value === undefined || isNaN(this.value)) {
-            this.value = this.minValue;
+        const normalizedValue = normalizeValue(this.value, this.minValue, this.maxValue, this.step);
+        if (normalizedValue !== this.value) {
+            this.value = normalizedValue;
+            return;
         }
-        const stringValue = this.value.toString();
+        const stringValue = normalizedValue.toString();
         this.thumbPosition = this.getValuePosition();
-        this.shownValue = stringValue;
+        this.shownValue = this.formattedValue ? this.formattedValue(normalizedValue) : stringValue;
         if (this.internals && !!this.internals.setFormValue) {
             this.internals.setFormValue(stringValue);
         }
@@ -80,10 +249,8 @@ export class VdsBasicSliderContinuous {
         this.changeInput.emit(this.value);
     }
     /**
-     * Updates the thumb position and forces a component update on window resize.
-     *
+     * Updates the thumb position and forces a component update on window resize
      * @private
-     * @ListensTo("resize", {target: "window"})
      */
     updateThumbAndTrackPosition() {
         this.thumbPosition = this.getValuePosition();
@@ -92,36 +259,17 @@ export class VdsBasicSliderContinuous {
     /**
      * Sets the initial value of the slider to the minimum value if no value is provided.
      * When value is provided, shownValue gets set.
-     *
      * @private
      */
     setDefaultValues() {
-        if (this.value === undefined || this.value === null) {
-            this.value = this.minValue;
-            this.shownValue = this.minValue.toString();
-        }
-        else {
-            this.shownValue = this.value.toString();
-        }
-    }
-    /**
-     * Sets the values of the slider to the minimum and maximum value when start and end value are out of bound.
-     *
-     * @private
-     */
-    setOutboundValues() {
-        if (this.value < this.minValue || this.value > this.maxValue) {
-            this.value = this.minValue;
-            this.shownValue = this.minValue.toString();
-        }
+        this.value = normalizeValue(this.value, this.minValue, this.maxValue, this.step);
+        this.shownValue = this.formattedValue ? this.formattedValue(this.value) : this.value.toString();
     }
     /**
      * This is necessary to avoid converting thumbPosition into a State variable. When Thumb is State, it will render the component twice on every value change.
      * When it has value on the first load, the component need to be re-render (forceUpdate) since
      * we need the width of the slider which is only available after the component finish the first render
-     *
      * @private
-     * @returns {void}
      */
     setThumbPositionOnFirstLoad() {
         if (this.value > this.minValue) {
@@ -129,11 +277,9 @@ export class VdsBasicSliderContinuous {
         }
     }
     /**
-     * Sets the value of the slider to the specified in the event.
-     *
+     * Sets the value of the slider to the specified in the event
      * @private
-     * @param {InputEvent} evt - The event emitted by the input.
-     * @returns {void}
+     * @param {InputEvent} evt - The event emitted by the input
      */
     handleInputChange(evt) {
         const target = evt.target;
@@ -141,23 +287,24 @@ export class VdsBasicSliderContinuous {
         this.setValue(value);
     }
     /**
-     * Sets the displayLabelShowValue to true when the mouse enters or focus the slider.
-     *
+     * Sets the displayLabelShowValue to true when the mouse enters or focus the slider
      * @private
-     * @returns {void}
      */
     handleInputMouseoverOrFocus() {
         this.displayLabelShowValue = true;
     }
     /**
-     * Sets the displayLabelShowValue to false when the mouse leaves or blur the slider.
-     *
+     * Sets the displayLabelShowValue to false when the mouse leaves or blur the slider
      * @private
-     * @returns {void}
      */
     handleInputMouseleaveOrBlur() {
         this.displayLabelShowValue = false;
     }
+    /**
+     * Determines whether to show the value label based on displayLabel prop
+     * @private
+     * @returns {boolean} True if value should be shown
+     */
     getShowValue() {
         let response = false;
         switch (this.displayLabel) {
@@ -176,25 +323,37 @@ export class VdsBasicSliderContinuous {
         return response;
     }
     /**
-     * Calculates the CSS left position of the slider thumb based on the current value.
-     *
+     * Calculates the CSS left position of the slider thumb based on the current value
      * @private
-     * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.
+     * @returns {string} The calculated left position of the slider thumb as a CSS percentage value
      */
     getValuePosition() {
-        return getPositionBasedOnValue(this.inputRangeEl, this.host, this.maxValue, this.minValue, this.value, this.size);
+        return getPositionBasedOnValue(this.maxValue, this.minValue, this.value);
+    }
+    /**
+     * Gets the marks to display on the slider track
+     * @private
+     * @returns {Marks[]} Array of mark definitions
+     */
+    getMarks() {
+        if (!this.showMarks) {
+            return [];
+        }
+        const parsedMarks = parseMarks(this.marks, this.minValue, this.maxValue);
+        if (parsedMarks.length) {
+            return parsedMarks;
+        }
+        return buildStepMarks(this.minValue, this.maxValue, this.step);
     }
     /**
      * Sets the custom colors for the slider based on the colors property.
      * This colors have to be css variables by preferences that work in both dark and light mode.
-     *
-     * Track - ThemeColors
-     * TrackFill - ThemeColors
-     * Thumb - ThemeColors
-     * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.
-     *
+     * - Track: ThemeColors
+     * - TrackFill: ThemeColors
+     * - Thumb: ThemeColors
+     * - Background: ThemeColors - When specified, trackfill and track won't work. It will only be one background display
      * @private
-     * @returns { [key: string]: string }
+     * @returns {{ [key: string]: string }} Object with CSS custom properties
      */
     setColors() {
         const styles = {};
@@ -215,22 +374,53 @@ export class VdsBasicSliderContinuous {
         }
         return styles;
     }
+    /**
+     * Renders the min and max value references
+     * @private
+     * @returns {HTMLStencilElement} Value references element
+     */
     renderValueReferences() {
-        return (h("div", { class: "vds-slider__value-reference-container" }, h("div", { class: combineClasses("vds-slider__value-reference") }, h("span", null, this.minValue), h("span", null, this.maxValue))));
+        const { minLabel, maxLabel } = getLimitLabels(this.marks, this.minValue, this.maxValue);
+        return (h("div", { class: "vds-slider__value-reference-container" }, h("div", { class: combineClasses("vds-slider__value-reference") }, h("span", null, minLabel), h("span", null, maxLabel))));
     }
+    /**
+     * Renders the current value tooltip above the thumb
+     * @private
+     * @returns {HTMLStencilElement} Value display element
+     */
     renderShownValue() {
         return (h("div", { class: "vds-slider__value-container" }, h("div", { class: "vds-slider__value-content", style: { left: this.thumbPosition } }, h("div", { class: "vds-slider__value" }, h("div", { class: "vds__tooltip-container" }, h("span", { class: "vds__tooltip-container-text" }, this.shownValue)), this.orientation !== "vertical" && h("vds-icon", { class: "tooltip-arrow", svgIcon: "caret-down-filled" })))));
     }
+    /**
+     * Renders the marks on the slider track
+     * @private
+     * @param {Marks[]} marks - Array of mark definitions
+     * @returns {HTMLStencilElement | null} Marks element or null if no marks
+     */
+    renderMarks(marks) {
+        if (!marks.length) {
+            return null;
+        }
+        return (h("div", { class: "vds-slider__marks" }, marks.map((mark) => (h("div", { class: "vds-slider__mark", style: { left: `${valueToPercentage(this.minValue, this.maxValue, mark.value)}%` } }, h("span", { class: "vds-slider__mark-indicator" }), mark.label ? h("span", { class: "vds-slider__mark-label" }, mark.label) : null)))));
+    }
+    /**
+     * Renders the main slider input and track elements
+     * @private
+     * @returns {HTMLStencilElement} Slider element
+     */
     renderSlider() {
-        return (h("div", { class: "vds-slider__input" }, h("input", { ref: (el) => {
-                this.inputRangeEl = el;
-            }, class: combineClasses("vds-slider-input"), type: "range", step: this.step, onInput: (evt) => this.handleInputChange(evt), onMouseOver: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus(); } : null, onMouseLeave: this.displayLabel === "auto" ? () => { this.handleInputMouseleaveOrBlur(); } : null, onFocus: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus(); } : null, onBlur: this.displayLabel === "auto" ? () => { this.handleInputMouseleaveOrBlur(); } : null, min: this.minValue, max: this.maxValue, value: this.value, disabled: this.disabled }), h("div", { class: `vds-slider__track`, ref: el => {
+        const marks = this.getMarks();
+        return (h("div", { class: "vds-slider__input" }, h("input", { class: combineClasses("vds-slider-input"), type: "range", step: this.step, onInput: (evt) => this.handleInputChange(evt), onMouseOver: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus(); } : null, onMouseLeave: this.displayLabel === "auto" ? () => { this.handleInputMouseleaveOrBlur(); } : null, onFocus: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus(); } : null, onBlur: this.displayLabel === "auto" ? () => { this.handleInputMouseleaveOrBlur(); } : null, min: this.minValue, max: this.maxValue, value: this.value, disabled: this.disabled }), h("div", { class: `vds-slider__track`, ref: el => {
                 if (el)
                     this.trackContainerEl = el;
-            } }), h("div", { class: "vds-slider__thumb", style: { left: this.thumbPosition } }, h("vds-icon", { svgIcon: this.icon, size: this.size === "medium" ? "1.25rem" : "1.5rem", class: "slider-thumb" })), this.getShowValue() && this.renderShownValue()));
+            } }), this.renderMarks(marks), h("div", { class: "vds-slider__thumb", style: { left: this.thumbPosition } }, h("vds-icon", { svgIcon: this.icon, size: this.size === "medium" ? "1.25rem" : "1.5rem", class: "slider-thumb" }))));
     }
+    /**
+     * Render the slider component
+     * @returns {HTMLStencilElement} The rendered slider element
+     */
     render() {
-        return (h(Host, { key: '892cc702be1a44b5edbe32684ba6a0af4fe1354a', class: combineClasses("vds-slider", this.disabled ? "vds-slider--disabled" : "") }, h("div", { key: 'e2d53dd86591a70dc110eedfda176afed5a1a517', class: combineClasses("vds-slider-continuous__container", `vds-slider-continuous__container--${this.size}`, `vds-slider-continuous__container--orientation-${this.orientation}`, this.colors ? "vds-slider-continuous__container--custom-colors" : "vds-slider-continuous__container--colors", this.disabled ? "vds-slider-continuous__container--disabled" : "", this.displayLimits ? "vds-slider-continuous__container--display-limits" : ""), style: this.setColors() }, h("div", { key: 'fde03f01289abff67b265ae676392306a3beec97', class: combineClasses("vds-slider-continuous__content"), "aria-label": this.setAriaLabel }, this.renderSlider()), this.displayLimits && this.renderValueReferences())));
+        return (h(Host, { key: 'd1b805121b99abd51c0134480cc336cf06c1b121', class: combineClasses("vds-slider", this.disabled ? "vds-slider--disabled" : "") }, h("div", { key: '2b1a5f127cf2d4e7fb4a1c2116562d51c503a1ed', class: combineClasses("vds-slider-continuous__container", `vds-slider-continuous__container--${this.size}`, `vds-slider-continuous__container--orientation-${this.orientation}`, this.colors ? "vds-slider-continuous__container--custom-colors" : "vds-slider-continuous__container--colors", this.disabled ? "vds-slider-continuous__container--disabled" : "", this.displayLimits ? "vds-slider-continuous__container--display-limits" : ""), style: this.setColors() }, h("div", { key: '7f048b5d8e9a1ad30115474798ed1c9652656706', class: combineClasses("vds-slider-continuous__content"), "aria-label": this.setAriaLabel }, this.getShowValue() && this.renderShownValue(), this.renderSlider()), this.displayLimits && this.renderValueReferences())));
     }
     static get is() { return "vds-basic-slider-continuous"; }
     static get encapsulation() { return "shadow"; }
@@ -258,8 +448,11 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the value of the slider.."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "Sets the value of the slider"
                 },
                 "getter": false,
                 "setter": false,
@@ -277,8 +470,14 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the size of the slider."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"medium\" | \"large\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Sets the size of the slider"
                 },
                 "getter": false,
                 "setter": false,
@@ -297,8 +496,14 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the slider\u2019s orientation."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"horizontal\" | \"vertical\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"horizontal\""
+                        }],
+                    "text": "Sets the slider's orientation"
                 },
                 "getter": false,
                 "setter": false,
@@ -317,8 +522,14 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the slider on disabled state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the slider on disabled state"
                 },
                 "getter": false,
                 "setter": false,
@@ -337,8 +548,14 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the min value of the slider (Min value should always be lower than the max value)."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }, {
+                            "name": "default",
+                            "text": "0"
+                        }],
+                    "text": "Sets the min value of the slider (Min value should always be lower than the max value)"
                 },
                 "getter": false,
                 "setter": false,
@@ -357,8 +574,14 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the max value of the slider.."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }, {
+                            "name": "default",
+                            "text": "100"
+                        }],
+                    "text": "Sets the max value of the slider"
                 },
                 "getter": false,
                 "setter": false,
@@ -377,8 +600,11 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the amount of advance of the slider."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "Sets the amount of advance of the slider"
                 },
                 "getter": false,
                 "setter": false,
@@ -396,7 +622,10 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets the aria label in slider"
                 },
                 "getter": false,
@@ -415,8 +644,14 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Toggles the value over the thumb in the slider \non - Always shows value over the thumb.\noff - Do not show the value over the thumb.\nauto - Shows value over the thumb when mouse hover."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"on\" | \"off\" | \"auto\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"on\""
+                        }],
+                    "text": "Toggles the value over the thumb in the slider\n- on: Always shows value over the thumb\n- off: Do not show the value over the thumb\n- auto: Shows value over the thumb when mouse hover"
                 },
                 "getter": false,
                 "setter": false,
@@ -435,8 +670,14 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Toggles the limit value (min and max) of the slider ."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Toggles the limit value (min and max) of the slider"
                 },
                 "getter": false,
                 "setter": false,
@@ -455,8 +696,11 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets colors of the slider.\nTrack - ThemeColors\nTrackFill - ThemeColors\nThumb - ThemeColors\nBackground - ThemeColors - When specified, trackfill and track won't work. It will only be one background display."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{{ [key: string]: string } | string}"
+                        }],
+                    "text": "Sets colors of the slider\n- Track: ThemeColors\n- TrackFill: ThemeColors\n- Thumb: ThemeColors\n- Background: ThemeColors - When specified, trackfill and track won't work. It will only be one background display"
                 },
                 "getter": false,
                 "setter": false,
@@ -474,7 +718,13 @@ export class VdsBasicSliderContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"thumb\""
+                        }],
                     "text": "Sets the thumb icon"
                 },
                 "getter": false,
@@ -482,6 +732,76 @@ export class VdsBasicSliderContinuous {
                 "reflect": false,
                 "attribute": "icon",
                 "defaultValue": "\"thumb\""
+            },
+            "showMarks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Show / Hide marks in the slider track"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-marks",
+                "defaultValue": "false"
+            },
+            "marks": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Marks[]",
+                    "resolved": "Marks[]",
+                    "references": {
+                        "Marks": {
+                            "location": "import",
+                            "path": "../../utils/slider.utils",
+                            "id": "src/utils/slider.utils.ts::Marks",
+                            "referenceLocation": "Marks"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{Marks[]}"
+                        }],
+                    "text": "Marks definition for discrete slider mode"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "formattedValue": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: number) => string",
+                    "resolved": "(value: number) => string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A formatter function that processes the displayed numeric value.\nThis function receives the current slider value and returns a formatted string for display.\n\nThe formatter function is called with a single numeric argument and should return a string."
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -498,7 +818,13 @@ export class VdsBasicSliderContinuous {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "changeInput"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<number>}"
+                        }],
                     "text": "Emits updated input value"
                 },
                 "complexType": {
@@ -516,7 +842,7 @@ export class VdsBasicSliderContinuous {
                     "parameters": [{
                             "name": "value",
                             "type": "number",
-                            "docs": "- The new value for the slider."
+                            "docs": "- The new value for the slider"
                         }],
                     "references": {
                         "Promise": {
@@ -527,13 +853,19 @@ export class VdsBasicSliderContinuous {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets the slider value to the specified value.",
+                    "text": "Sets the slider value to the specified value",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "param",
-                            "text": "value - The new value for the slider."
+                            "text": "value - The new value for the slider"
                         }, {
                             "name": "returns",
-                            "text": "A promise that resolves when the value is set."
+                            "text": "A promise that resolves when the value is set"
                         }]
                 }
             },
@@ -550,10 +882,16 @@ export class VdsBasicSliderContinuous {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Clears the slider value by setting it to the minimum value.",
+                    "text": "Clears the slider value by setting it to the minimum value",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves when the value is cleared."
+                            "text": "A promise that resolves when the value is cleared"
                         }]
                 }
             }
@@ -577,4 +915,3 @@ export class VdsBasicSliderContinuous {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=vds-basic-slider-continuous.js.map