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

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

@@ -1,68 +1,245 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
-import { getPositionBasedOnValue, logWarnings } from "../../utils/slider.utils";
+import { getPositionBasedOnValue, logWarnings, normalizeValue, normalizeRangeValues, buildStepMarks, parseMarks, getLimitLabels, valueToPercentage } from "../../utils/slider.utils";
 import { forceUpdate } from "@stencil/core/internal";
 import { countDecimalPlaces } from "../../utils/number-utils";
+/**
+ * @component vds-basic-slider-range-continuous
+ * @description A continuous range slider component for selecting a numeric range with start and end values. Supports horizontal and vertical orientations, custom step increments, value labels, and custom theming. Ideal for filtering price ranges, time periods, and other numeric ranges.
+ *
+ * @example
+ * <!-- Basic range slider with default range 0-100 -->
+ * <vds-basic-slider-range-continuous
+ *   start-value="25"
+ *   end-value="75">
+ * </vds-basic-slider-range-continuous>
+ *
+ * @example
+ * <!-- Large range slider with custom range -->
+ * <vds-basic-slider-range-continuous
+ *   start-value="100"
+ *   end-value="400"
+ *   min-value="0"
+ *   max-value="500"
+ *   size="large">
+ * </vds-basic-slider-range-continuous>
+ *
+ * @example
+ * <!-- Range slider with step increment -->
+ * <vds-basic-slider-range-continuous
+ *   start-value="20"
+ *   end-value="80"
+ *   min-value="0"
+ *   max-value="100"
+ *   step="5">
+ * </vds-basic-slider-range-continuous>
+ *
+ * @example
+ * <!-- Vertical range slider -->
+ * <vds-basic-slider-range-continuous
+ *   start-value="30"
+ *   end-value="70"
+ *   orientation="vertical"
+ *   style="height: 300px;">
+ * </vds-basic-slider-range-continuous>
+ *
+ * @example
+ * <!-- Range slider without value labels -->
+ * <vds-basic-slider-range-continuous
+ *   start-value="40"
+ *   end-value="60"
+ *   display-label="off">
+ * </vds-basic-slider-range-continuous>
+ *
+ * @example
+ * <!-- Range slider with auto labels (shows on hover) -->
+ * <vds-basic-slider-range-continuous
+ *   start-value="30"
+ *   end-value="70"
+ *   display-label="auto">
+ * </vds-basic-slider-range-continuous>
+ *
+ * @example
+ * <!-- Range slider without limit labels -->
+ * <vds-basic-slider-range-continuous
+ *   start-value="20"
+ *   end-value="80"
+ *   display-limits="false">
+ * </vds-basic-slider-range-continuous>
+ *
+ * @example
+ * <!-- Disabled range slider -->
+ * <vds-basic-slider-range-continuous
+ *   start-value="25"
+ *   end-value="75"
+ *   disabled="true">
+ * </vds-basic-slider-range-continuous>
+ *
+ * @example
+ * <!-- Range slider with custom colors -->
+ * <vds-basic-slider-range-continuous
+ *   start-value="30"
+ *   end-value="70"
+ *   colors='{"Track": "grey-200", "TrackFill": "primary-500", "Thumb": "primary-700"}'>
+ * </vds-basic-slider-range-continuous>
+ *
+ * @example
+ * <!-- Price range filter -->
+ * <div>
+ *   <label>Price Range: <span id="price-min">$25</span> - <span id="price-max">$75</span></label>
+ *   <vds-basic-slider-range-continuous
+ *     id="price-range"
+ *     start-value="25"
+ *     end-value="75"
+ *     min-value="0"
+ *     max-value="100"
+ *     step="5"
+ *     set-aria-label="Price range filter">
+ *   </vds-basic-slider-range-continuous>
+ * </div>
+ *
+ * @example
+ * <!-- Time range selector (hours) -->
+ * <div style="margin: 2rem;">
+ *   <label>Select Time Range</label>
+ *   <vds-basic-slider-range-continuous
+ *     start-value="9"
+ *     end-value="17"
+ *     min-value="0"
+ *     max-value="24"
+ *     step="1"
+ *     set-aria-label="Time range selector">
+ *   </vds-basic-slider-range-continuous>
+ *   <div style="display: flex; justify-content: space-between; margin-top: 0.5rem;">
+ *     <span>00:00</span>
+ *     <span>24:00</span>
+ *   </div>
+ * </div>
+ *
+ * @example
+ * <!-- Range slider with event handling -->
+ * <div>
+ *   <label>Select Range: <span id="range-display">25 - 75</span></label>
+ *   <vds-basic-slider-range-continuous
+ *     id="event-range"
+ *     start-value="25"
+ *     end-value="75"
+ *     min-value="0"
+ *     max-value="100">
+ *   </vds-basic-slider-range-continuous>
+ * </div>
+ * <script>
+ *   const slider = document.getElementById('event-range');
+ *   const display = document.getElementById('range-display');
+ *   slider.addEventListener('changeRangeValue', (e) => {
+ *     display.textContent = `${e.detail.startValue} - ${e.detail.endValue}`;
+ *   });
+ * </script>
+ */
 export class VdsBasicSliderRangeContinuous {
     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;
-        /** Sets the amount of advance of the slider. */
-        this.step = 1;
-        /** 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({ start: this.startValue, end: this.endValue }, this.maxValue, this.minValue);
+        logWarnings({ start: this.startValue, end: this.endValue }, this.maxValue, this.minValue, this.step);
         this.setDefaultValues();
     }
-    componentDidRender() {
-        this.setOutboundValues();
-    }
+    /**
+     * Component lifecycle hook - sets input values and forces update
+     * @private
+     */
     componentDidLoad() {
         this.setInputStartValue();
         this.setInputEndValue();
         forceUpdate(this);
     }
     /**
-     * Sets the slider startValue and endValue to the specified value.
-     *
-     * @param { startValue: number; endValue: number } values - The new values for the slider.
-     * @returns {Promise<void>} A promise that resolves when the value is set.
+     * Sets the slider startValue and endValue to the specified values
+     * @method
+     * @public
+     * @param {{ startValue: number; endValue: number }} values - The new values for the slider
+     * @returns {Promise<void>} A promise that resolves when the values are set
      */
     setValues({ startValue, endValue }) {
-        this.startValue = startValue;
-        this.endValue = endValue;
+        const normalized = normalizeRangeValues(startValue, endValue, this.minValue, this.maxValue, this.step);
+        this.startValue = normalized.startValue;
+        this.endValue = normalized.endValue;
         return Promise.resolve();
     }
     /**
-     * Gets the slider startValue and endValue.
-     *
-     * @returns {Promise<{ startValue: number; endValue: number }>} A promise that resolves the values.
+     * Gets the slider startValue and endValue
+     * @method
+     * @public
+     * @returns {Promise<{ startValue: number; endValue: number }>} A promise that resolves with the current values
      */
     getValues() {
         return Promise.resolve({ startValue: this.startValue, endValue: this.endValue });
     }
     /**
-     * Clears the slider range values by setting it to the minimum and maximun value respectively.
-     *
-     * @returns {Promise<void>} A promise that resolves when the value is cleared.
+     * Clears the slider range values by setting them to the minimum and maximum value respectively
+     * @method
+     * @public
+     * @returns {Promise<void>} A promise that resolves when the values are cleared
      */
     clear() {
         this.startValue = this.minValue;
@@ -70,54 +247,59 @@ export class VdsBasicSliderRangeContinuous {
         return Promise.resolve();
     }
     /**
-     * Focus the slider range by focusing start slider.
-     *
-     * @returns {Promise<void>} A promise that resolves when the first slider is focused.
+     * Focus the slider range by focusing start slider
+     * @method
+     * @public
+     * @returns {Promise<void>} A promise that resolves when the first slider is focused
      */
     setFocus() {
         this.startInputRangeEl.focus();
         return Promise.resolve();
     }
     /**
-     * Sets slider startThumbPosition, startShownValue.
+     * Sets slider startThumbPosition and startShownValue.
      * Calculates the start thumb position based on the value.
      * Emits changeRangeValue event
-     *
-     * @returns {void}
+     * @private
      */
     setInputStartValue() {
-        const stringValue = this.startValue.toString();
-        this.startThumbPosition = this.getValuePosition(this.startValue, this.startInputRangeEl);
-        this.startShownValue = stringValue;
+        const normalizedValue = normalizeValue(this.startValue, this.minValue, this.maxValue, this.step);
+        if (normalizedValue !== this.startValue) {
+            this.startValue = normalizedValue;
+            return;
+        }
+        this.startThumbPosition = this.getValuePosition(this.startValue);
+        this.startShownValue = normalizedValue.toString();
         this.changeRangeValue.emit({ startValue: this.startValue, endValue: this.endValue });
     }
     /**
-     * Sets slider endThumbPosition, endShownValue.
+     * Sets slider endThumbPosition and endShownValue.
      * Calculates the end thumb position based on the value.
      * Emits changeRangeValue event
-     *
-     * @returns {void}
+     * @private
      */
     setInputEndValue() {
-        const stringValue = this.endValue.toString();
-        this.endThumbPosition = this.getValuePosition(this.endValue, this.endInputRangeEl);
-        this.endShownValue = stringValue;
+        const normalizedValue = normalizeValue(this.endValue, this.minValue, this.maxValue, this.step);
+        if (normalizedValue !== this.endValue) {
+            this.endValue = normalizedValue;
+            return;
+        }
+        this.endThumbPosition = this.getValuePosition(this.endValue);
+        this.endShownValue = normalizedValue.toString();
         this.changeRangeValue.emit({ startValue: this.startValue, endValue: this.endValue });
     }
     /**
-     * Updates the thumb position and forces a component update on window resize.
-     *
-     * @ListensTo("resize", {target: "window"})
+     * Updates the thumb position and forces a component update on window resize
+     * @private
      */
     updateThumbAndTrackPosition() {
-        this.startThumbPosition = this.getValuePosition(this.startValue, this.startInputRangeEl);
-        this.endThumbPosition = this.getValuePosition(this.endValue, this.endInputRangeEl);
+        this.startThumbPosition = this.getValuePosition(this.startValue);
+        this.endThumbPosition = this.getValuePosition(this.endValue);
         forceUpdate(this);
     }
     /**
-     * Focus the first slider when displayLabel is set to auto.
-     *
-     * @ListensTo("focus")
+     * Focus the first slider when displayLabel is set to auto
+     * @private
      */
     setFocusOnDisplayLabelAuto() {
         if (this.displayLabel === "auto") {
@@ -126,59 +308,30 @@ export class VdsBasicSliderRangeContinuous {
     }
     /**
      * Sets the initial value of the slider to the minimum and maximum value when start and end value are not provided.
-     * When values are provided, shownValues get set.
-     *
+     * When values are provided, values get normalized and shownValues get set.
      * @private
      */
     setDefaultValues() {
-        if (this.startValue === undefined || this.startValue === null) {
-            this.startValue = this.minValue;
-            this.startShownValue = this.minValue.toString();
-        }
-        else {
-            this.startShownValue = this.startValue.toString();
-        }
-        if (this.endValue === undefined || this.endValue === null) {
-            this.endValue = this.maxValue;
-            this.endShownValue = this.maxValue.toString();
-        }
-        else {
-            this.endShownValue = this.endValue.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.startValue < this.minValue) {
-            this.startValue = this.minValue;
-            this.startShownValue = this.minValue.toString();
-        }
-        if (this.endValue > this.maxValue) {
-            this.endValue = this.maxValue;
-            this.endShownValue = this.maxValue.toString();
-        }
+        const normalized = normalizeRangeValues(this.startValue, this.endValue, this.minValue, this.maxValue, this.step);
+        this.startValue = normalized.startValue;
+        this.startShownValue = this.startValue.toString();
+        this.endValue = normalized.endValue;
+        this.endShownValue = this.endValue.toString();
     }
     /**
-     * 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
-     * @params value - number
-     * @params inputRangeEl - HTMLInputElement
-     * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.
+     * @param {number} value - The value to calculate position for
+     * @returns {string} The calculated left position of the slider thumb as a CSS percentage value
      */
-    getValuePosition(value, inputRangeEl) {
-        return getPositionBasedOnValue(inputRangeEl, this.host, this.maxValue, this.minValue, value, this.size);
+    getValuePosition(value) {
+        return getPositionBasedOnValue(this.maxValue, this.minValue, value);
     }
     /**
-     * Sets the start/end value of the slider range to the specified in the event.
-     *
+     * Sets the start/end value of the slider range to the specified in the event
      * @private
-     * @param {InputEvent} evt - The event emitted by the input.
-     * @param {SliderRangeValueType} rangeType - start | end slider.
-     * @returns {void}
+     * @param {InputEvent} evt - The event emitted by the input
+     * @param {SliderRangeValueType} rangeType - start | end slider
      */
     handleInputRangeChange(evt, rangeType) {
         const target = evt.target;
@@ -196,12 +349,10 @@ export class VdsBasicSliderRangeContinuous {
     }
     /**
      * Handles mouseover or focus events on the slider.
-     * Sets the `displayLabelShowValue` flag to `true` to indicate that the display label should show the value.
-     *
+     * Sets the displayLabelShowValue flag to true to indicate that the display label should show the value.
      * @private
-     * @param {SliderRangeValueType} rangeType - The type of range (either "start" or "end").
-     * @param {"mouseover" | "focus"} eventTrigger - The type of event that triggered this function.
-     * @returns {void}
+     * @param {SliderRangeValueType} rangeType - The type of range (either "start" or "end")
+     * @param {"mouseover" | "focus"} eventTrigger - The type of event that triggered this function
      */
     handleInputMouseoverOrFocus(rangeType, eventTrigger) {
         this.displayLabelShowValue = true;
@@ -218,11 +369,9 @@ export class VdsBasicSliderRangeContinuous {
     }
     /**
      * Handles mouseleave or blur events on the slider.
-     * Sets the `displayLabelShowValue` flag to `false` to hide the value in the display label.
-     *
+     * Sets the displayLabelShowValue flag to false to hide the value in the display label.
      * @private
-     * @param {SliderRangeValueType} rangeType - The type of range (either "start" or "end").
-     * @returns {void}
+     * @param {SliderRangeValueType} rangeType - The type of range (either "start" or "end")
      */
     handleInputMouseleaveOrBlur(rangeType) {
         this.displayLabelShowValue = false;
@@ -236,10 +385,8 @@ export class VdsBasicSliderRangeContinuous {
     /**
      * Handles click events on the slider track.
      * Calculates the corresponding value based on the click position and updates the slider's start or end value accordingly.
-     *
      * @private
-     * @param {MouseEvent} evt - The mouse event object.
-     * @returns {void}
+     * @param {MouseEvent} evt - The mouse event object
      */
     handleTrackClick(evt) {
         if (!this.disabled) {
@@ -267,10 +414,9 @@ export class VdsBasicSliderRangeContinuous {
         }
     }
     /**
-     * Determines whether the value should be displayed in the label based on the current displayLabel setting.
-     *
+     * Determines whether the value should be displayed in the label based on the current displayLabel setting
      * @private
-     * @returns {boolean} - True if the value should be displayed, false otherwise.
+     * @returns {boolean} True if the value should be displayed, false otherwise
      */
     getShowValue() {
         let response = false;
@@ -289,17 +435,42 @@ export class VdsBasicSliderRangeContinuous {
         }
         return response;
     }
+    /**
+     * 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);
+    }
+    /**
+     * 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-range__marks" }, marks.map((mark) => (h("div", { class: "vds-slider-range__mark", style: { left: `${valueToPercentage(this.minValue, this.maxValue, mark.value)}%` } }, h("span", { class: "vds-slider-range__mark-indicator" }), mark.label ? h("span", { class: "vds-slider-range__mark-label" }, mark.label) : null)))));
+    }
     /**
      * 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 = {};
@@ -319,6 +490,12 @@ export class VdsBasicSliderRangeContinuous {
         }
         return styles;
     }
+    /**
+     * Renders the value tooltip for start or end thumb
+     * @private
+     * @param {SliderRangeValueType} rangeType - The type of range (either "start" or "end")
+     * @returns {HTMLStencilElement} Value display element
+     */
     renderShownValue(rangeType) {
         if (rangeType === "start") {
             return (h("div", { class: "vds-slider-range__value-container" }, h("div", { class: "vds-slider-range__value-content", style: { left: this.startThumbPosition } }, h("div", { class: "vds-slider-range__value" }, h("div", { class: "vds__tooltip-container" }, h("span", { class: "vds__tooltip-container-text" }, this.startShownValue)), this.orientation !== "vertical" && h("vds-icon", { class: "tooltip-arrow", svgIcon: "caret-down-filled" })))));
@@ -327,17 +504,29 @@ export class VdsBasicSliderRangeContinuous {
             return (h("div", { class: "vds-slider-range__value-container" }, h("div", { class: "vds-slider-range__value-content", style: { left: this.endThumbPosition } }, h("div", { class: "vds-slider-range__value" }, h("div", { class: "vds__tooltip-container" }, h("span", { class: "vds__tooltip-container-text" }, this.endShownValue)), this.orientation !== "vertical" && h("vds-icon", { class: "tooltip-arrow", svgIcon: "caret-down-filled" })))));
         }
     }
+    /**
+     * Renders the min and max value references
+     * @private
+     * @returns {HTMLStencilElement} Value references element
+     */
     renderValueReferences() {
-        return (h("div", { class: "vds-slider-range__value-reference-container" }, h("div", { class: combineClasses("vds-slider-range__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-range__value-reference-container" }, h("div", { class: combineClasses("vds-slider-range__value-reference") }, h("span", null, minLabel), h("span", null, maxLabel))));
     }
+    /**
+     * Renders the main range slider inputs and track elements
+     * @private
+     * @returns {HTMLStencilElement} Range slider element
+     */
     renderSliders() {
+        const marks = this.getMarks();
         return (h("div", { class: "vds-slider-range-input__content" }, h("div", { class: "vds-slider-range", onClick: (evt) => this.handleTrackClick(evt), ref: (el) => {
                 if (el) {
                     this.trackContentContainerEl = el;
                 }
             } }, h("div", { class: "vds-slider-range__track" }), h("div", { class: "vds-slider-range__range", style: { width: `calc(${this.endThumbPosition} - ${this.startThumbPosition})`, left: `${this.startThumbPosition}` }, ref: (el) => {
                 this.trackRangeFillContainerEl = el;
-            } }), h("div", { class: "vds-slider-range__thumb vds-slider-range__thumb--start", style: { left: `${this.startThumbPosition}` } }, h("vds-icon", { svgIcon: this.icon, size: this.size === "medium" ? "1.25rem" : "1.5rem", class: "slider-thumb slider-start-thumb" })), h("div", { class: "vds-slider-range__thumb vds-slider-range__thumb--end", style: { left: `${this.endThumbPosition}` } }, h("vds-icon", { svgIcon: this.icon, size: this.size === "medium" ? "1.25rem" : "1.5rem", class: "slider-thumb slider-end-thumb" }))), h("input", { ref: (el) => {
+            } }), this.renderMarks(marks), h("div", { class: "vds-slider-range__thumb vds-slider-range__thumb--start", style: { left: `${this.startThumbPosition}` } }, h("vds-icon", { svgIcon: this.icon, size: this.size === "medium" ? "1.25rem" : "1.5rem", class: "slider-thumb slider-start-thumb" })), h("div", { class: "vds-slider-range__thumb vds-slider-range__thumb--end", style: { left: `${this.endThumbPosition}` } }, h("vds-icon", { svgIcon: this.icon, size: this.size === "medium" ? "1.25rem" : "1.5rem", class: "slider-thumb slider-end-thumb" }))), h("input", { ref: (el) => {
                 if (el) {
                     this.startInputRangeEl = el;
                 }
@@ -347,8 +536,12 @@ export class VdsBasicSliderRangeContinuous {
                 }
             }, class: combineClasses("vds-slider-input", "vds-slider-end-input", this.disabled ? "vds-slider-input--disabled" : ""), type: "range", step: this.step, onInput: (evt) => this.handleInputRangeChange(evt, "end"), onMouseOver: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus("end", "mouseover"); } : null, onMouseLeave: this.displayLabel === "auto" && this.displayLabelEndEventTriggerIn === "mouseover" ? () => { this.handleInputMouseleaveOrBlur("end"); } : null, onFocus: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus("end", "focus"); } : null, onBlur: this.displayLabel === "auto" && this.displayLabelEndEventTriggerIn === "focus" ? () => { this.handleInputMouseleaveOrBlur("end"); } : null, min: this.minValue, max: this.maxValue, value: this.endValue, disabled: this.disabled })));
     }
+    /**
+     * Render the range slider component
+     * @returns {HTMLStencilElement} The rendered range slider element
+     */
     render() {
-        return (h(Host, { key: 'a65408aa36c076e182eb11cfa3703fa3457f576e', class: this.disabled ? "vds-slider-range--disabled" : "" }, h("div", { key: '4312632b2fe4a15ff74087a0e98eaf4ecc5c0c33', class: combineClasses("vds-slider-range__container", `vds-slider-range__container--${this.size}`, `vds-slider-range__container--orientation-${this.orientation}`, this.colors ? "vds-slider-range__container--custom-colors" : "vds-slider-range__container--colors", this.disabled ? "vds-slider-range__container--disabled" : "", this.displayLimits ? "vds-slider-range__container--display-limits" : ""), style: this.setColors() }, h("div", { key: '22efb23ad6a32ec6794463a02e3ea9a736807a6a', class: "vds-slider-range__content", "aria-label": this.setAriaLabel }, this.getShowValue() && this.renderShownValue("start"), this.getShowValue() && this.renderShownValue("end"), this.renderSliders()), this.displayLimits && this.renderValueReferences())));
+        return (h(Host, { key: '9a4a0d966870d09223eb001dc6abdee6a43a7ff0', class: this.disabled ? "vds-slider-range--disabled" : "" }, h("div", { key: '43144e99abdc8eefefb21afefe413d900f247682', class: combineClasses("vds-slider-range__container", `vds-slider-range__container--${this.size}`, `vds-slider-range__container--orientation-${this.orientation}`, this.colors ? "vds-slider-range__container--custom-colors" : "vds-slider-range__container--colors", this.disabled ? "vds-slider-range__container--disabled" : "", this.displayLimits ? "vds-slider-range__container--display-limits" : ""), style: this.setColors() }, h("div", { key: '7581bdd688386cbe9ce91b5fa49e488e51d22997', class: "vds-slider-range__content", "aria-label": this.setAriaLabel }, this.getShowValue() && this.renderShownValue("start"), this.getShowValue() && this.renderShownValue("end"), this.renderSliders()), this.displayLimits && this.renderValueReferences())));
     }
     static get is() { return "vds-basic-slider-range-continuous"; }
     static get encapsulation() { return "shadow"; }
@@ -375,8 +568,11 @@ export class VdsBasicSliderRangeContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the start value of the slider."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "Sets the start value of the slider"
                 },
                 "getter": false,
                 "setter": false,
@@ -394,8 +590,11 @@ export class VdsBasicSliderRangeContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the start value of the slider."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "Sets the end value of the slider"
                 },
                 "getter": false,
                 "setter": false,
@@ -413,8 +612,14 @@ export class VdsBasicSliderRangeContinuous {
                 "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,
@@ -433,8 +638,14 @@ export class VdsBasicSliderRangeContinuous {
                 "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,
@@ -453,8 +664,14 @@ export class VdsBasicSliderRangeContinuous {
                 "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,
@@ -473,8 +690,14 @@ export class VdsBasicSliderRangeContinuous {
                 "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,
@@ -493,8 +716,14 @@ export class VdsBasicSliderRangeContinuous {
                 "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,
@@ -513,14 +742,16 @@ export class VdsBasicSliderRangeContinuous {
                 "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,
                 "reflect": false,
-                "attribute": "step",
-                "defaultValue": "1"
+                "attribute": "step"
             },
             "setAriaLabel": {
                 "type": "string",
@@ -533,7 +764,10 @@ export class VdsBasicSliderRangeContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets the aria label in slider"
                 },
                 "getter": false,
@@ -552,8 +786,14 @@ export class VdsBasicSliderRangeContinuous {
                 "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,
@@ -572,8 +812,14 @@ export class VdsBasicSliderRangeContinuous {
                 "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,
@@ -592,8 +838,11 @@ export class VdsBasicSliderRangeContinuous {
                 "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,
@@ -611,7 +860,13 @@ export class VdsBasicSliderRangeContinuous {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"thumb\""
+                        }],
                     "text": "Sets the thumb icon"
                 },
                 "getter": false,
@@ -619,6 +874,59 @@ export class VdsBasicSliderRangeContinuous {
                 "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
             }
         };
     }
@@ -635,8 +943,14 @@ export class VdsBasicSliderRangeContinuous {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits updated input value"
+                    "tags": [{
+                            "name": "event",
+                            "text": "changeRangeValue"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<{ startValue: number; endValue: number }>}"
+                        }],
+                    "text": "Emits updated range values when start or end value changes"
                 },
                 "complexType": {
                     "original": "{ startValue: number; endValue: number }",
@@ -653,7 +967,7 @@ export class VdsBasicSliderRangeContinuous {
                     "parameters": [{
                             "name": "__0",
                             "type": "{ startValue: number; endValue: number; }",
-                            "docs": ": number; endValue: number } values - The new values for the slider."
+                            "docs": "- The new values for the slider"
                         }],
                     "references": {
                         "Promise": {
@@ -664,13 +978,19 @@ export class VdsBasicSliderRangeContinuous {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets the slider startValue and endValue to the specified value.",
+                    "text": "Sets the slider startValue and endValue to the specified values",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "param",
-                            "text": " : number; endValue: number } values - The new values for the slider."
+                            "text": "values - The new values for the slider"
                         }, {
                             "name": "returns",
-                            "text": "A promise that resolves when the value is set."
+                            "text": "A promise that resolves when the values are set"
                         }]
                 }
             },
@@ -687,10 +1007,16 @@ export class VdsBasicSliderRangeContinuous {
                     "return": "Promise<{ startValue: number; endValue: number; }>"
                 },
                 "docs": {
-                    "text": "Gets the slider startValue and endValue.",
+                    "text": "Gets the slider startValue and endValue",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves the values."
+                            "text": "A promise that resolves with the current values"
                         }]
                 }
             },
@@ -707,10 +1033,16 @@ export class VdsBasicSliderRangeContinuous {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Clears the slider range values by setting it to the minimum and maximun value respectively.",
+                    "text": "Clears the slider range values by setting them to the minimum and maximum value respectively",
                     "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 values are cleared"
                         }]
                 }
             },
@@ -727,10 +1059,16 @@ export class VdsBasicSliderRangeContinuous {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Focus the slider range by focusing start slider.",
+                    "text": "Focus the slider range by focusing start slider",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "A promise that resolves when the first slider is focused."
+                            "text": "A promise that resolves when the first slider is focused"
                         }]
                 }
             }
@@ -762,4 +1100,3 @@ export class VdsBasicSliderRangeContinuous {
             }];
     }
 }
-//# sourceMappingURL=vds-basic-slider-range-continuous.js.map