@carbon/web-components 2.32.1 → 2.33.0

package/es-custom/components/slider/slider.js

@@ -7,7 +7,7 @@
 
 import { __decorate } from 'tslib';
 import { html, LitElement } from 'lit';
-import { query, property } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import throttle from 'lodash-es/throttle';
 import { prefix } from '../../globals/settings.js';
@@ -37,6 +37,10 @@ const THUMB_DIRECTION = {
     Down: 1,
     ArrowDown: 1,
 };
+/**
+ * Minimum time between processed "drag" events.
+ */
+const EVENT_THROTTLE = 16; // ms
 /**
  * Slider.
  *
@@ -51,6 +55,10 @@ const THUMB_DIRECTION = {
 let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
     constructor() {
         super(...arguments);
+        this._cachedRateUpper = 1;
+        this._cachedRate = 0;
+        this.dragCooldownTimeout = null;
+        this.dragCoolDown = false;
         /**
          * The internal value of `max` property.
          */
@@ -75,14 +83,26 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
          * `true` if dragging of thumb is in progress.
          */
         this._dragging = false;
+        /**
+         * `true` if dragging of thumb upper is in progress.
+         */
+        this._draggingUpper = false;
+        /**
+         * Throttles calls to `this._onDrag` by limiting events to being processed at
+         * most once every `EVENT_THROTTLE` milliseconds.
+         */
+        this.onDrag = throttle(this._startDrag, EVENT_THROTTLE, {
+            leading: true,
+            trailing: false,
+        });
         /**
          * Handles `pointermove` to update the thumb position and the value as necessary.
          *
          * @param event The event.
          */
         this._handlePointermove = (event) => {
-            const { disabled, _dragging: dragging } = this;
-            if (!disabled && dragging) {
+            const { disabled, _dragging: dragging, _draggingUpper: draggingUpper, } = this;
+            if (!disabled && (dragging || draggingUpper)) {
                 this._throttledHandlePointermoveImpl(event);
             }
         };
@@ -90,6 +110,12 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
          * Handles `pointerup` and `pointerleave` event to finishing dragging.
          */
         this._endDrag = () => {
+            if (this._dragging || this._draggingUpper) {
+                this.dragCoolDown = true;
+            }
+            else {
+                this.dragCoolDown = false;
+            }
             if (this._dragging) {
                 this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
                     bubbles: true,
@@ -101,21 +127,59 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                 this._dragging = false;
                 this._thumbNode.style.touchAction = '';
             }
+            else if (this._draggingUpper) {
+                this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        value: this.unstable_valueUpper,
+                    },
+                }));
+                this._draggingUpper = false;
+                this._thumbNodeUpper.style.touchAction = '';
+            }
+            if (this._dragging || this._draggingUpper) {
+                this.dragCooldownTimeout = window.setTimeout(() => {
+                    this.dragCoolDown = false;
+                }, 100);
+            }
         };
         /**
          * Handles `${prefix}-slider-input-changed` event to update the value.
          */
-        this._handleChangeInput = ({ detail }) => {
+        this._handleChangeInput = (event) => {
+            var _a;
+            const input = event.target;
+            const inputElement = (_a = input.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            this.isValid =
+                input.tagName === 'CDS-SLIDER-INPUT'
+                    ? this._getInputValidity(input)
+                    : this.isValid;
+            this.warn = this._getInputWarnigState(inputElement);
+            const eventContainer = event.target.id;
+            const { detail } = event;
             const { intermediate, value } = detail;
-            this.value = value;
-            this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    value,
-                    intermediate,
-                },
-            }));
+            this.warnText = intermediate
+                ? `The inputted value ${intermediate} was corrected to the nearest allowed digit`
+                : '';
+            if (intermediate !== value) {
+                if (eventContainer === 'upper') {
+                    this.unstable_valueUpper = value;
+                }
+                else {
+                    this.value = value;
+                }
+            }
+            const valueMain = eventContainer === 'upper' ? this.unstable_valueUpper : this.value;
+            valueMain !== '' &&
+                this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        value: valueMain,
+                        intermediate,
+                    },
+                }));
         };
         /**
          * `true` if the check box should be disabled.
@@ -171,6 +235,10 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
          * Provide the text that is displayed when the control is in warning state
          */
         this.warnText = '';
+        /**
+         * Checks whether the input field is hidden or not
+         */
+        this.hideTextInput = false;
     }
     /**
      * The rate of the thumb position in the track.
@@ -179,8 +247,15 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
     get _rate() {
         const { max, min, value } = this;
         // Copes with out-of-range value coming programmatically or from `<cds-custom-slider-input>`
-        return ((Math.min(Number(max), Math.max(Number(min), value)) - Number(min)) /
-            (Number(max) - Number(min)));
+        if (value) {
+            const rate = (Math.min(Number(max), Math.max(Number(min), value)) - Number(min)) /
+                (Number(max) - Number(min));
+            this._cachedRate = rate;
+            return rate;
+        }
+        else {
+            return this._cachedRate;
+        }
     }
     set _rate(rate) {
         const { max, min, step } = this;
@@ -190,6 +265,32 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                     Number(step)) *
                     Number(step);
     }
+    /**
+     * The rate of the upper thumb position in the track.
+     * When we try to set a new value for upper input, we adjust the value considering `step` property.
+     */
+    get _rateUpper() {
+        const { max, min, unstable_valueUpper } = this;
+        // Copes with out-of-range value coming programmatically or from `<cds-custom-slider-input>`
+        if (unstable_valueUpper) {
+            const rateUpper = (Math.min(Number(max), Math.max(Number(min), unstable_valueUpper)) -
+                Number(min)) /
+                (Number(max) - Number(min));
+            this._cachedRateUpper = rateUpper;
+            return rateUpper;
+        }
+        else {
+            return this._cachedRateUpper;
+        }
+    }
+    set _rateUpper(rateUpper) {
+        const { max, min, step } = this;
+        this.unstable_valueUpper =
+            Number(min) +
+                Math.round(((Number(max) - Number(min)) * Math.min(1, Math.max(0, rateUpper))) /
+                    Number(step)) *
+                    Number(step);
+    }
     /**
      * Handles `click` event on the `<label>` to focus on the thumb.
      */
@@ -207,59 +308,156 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
     /**
      * Handles `keydown` event on the thumb to increase/decrease the value.
      */
-    _handleKeydown({ key, shiftKey }) {
-        if (!this.disabled) {
+    _handleKeydown(event) {
+        const eventContainer = event.target.id;
+        const { key, shiftKey } = event;
+        if (!this.disabled && !this.readonly) {
             if (key in THUMB_DIRECTION) {
-                const { max: rawMax, min: rawMin, step: rawStep, stepMultiplier: rawstepMultiplier, value, } = this;
+                const { max: rawMax, min: rawMin, step: rawStep, stepMultiplier: rawstepMultiplier, value, unstable_valueUpper, } = this;
                 const max = Number(rawMax);
                 const min = Number(rawMin);
                 const step = Number(rawStep);
                 const stepMultiplier = Number(rawstepMultiplier);
                 const diff = (!shiftKey ? step : (max - min) / stepMultiplier) *
                     THUMB_DIRECTION[key];
-                const stepCount = (value + diff) / step;
                 // Snaps to next
-                this.value = Math.min(max, Math.max(min, (diff >= 0 ? Math.floor(stepCount) : Math.ceil(stepCount)) * step));
-                this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: this.value,
-                        intermediate: false,
-                    },
-                }));
+                if (eventContainer == 'thumb-upper') {
+                    const stepCount = (unstable_valueUpper + diff) / step;
+                    const position = Math.min(max, Math.max(min, (diff >= 0 ? Math.floor(stepCount) : Math.ceil(stepCount)) * step));
+                    if (position >= this.value) {
+                        this.unstable_valueUpper = position;
+                    }
+                    this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            value: this.unstable_valueUpper,
+                            intermediate: false,
+                        },
+                    }));
+                }
+                else {
+                    const stepCount = (value + diff) / step;
+                    const position = Math.min(max, Math.max(min, (diff >= 0 ? Math.floor(stepCount) : Math.ceil(stepCount)) * step));
+                    if (!this.unstable_valueUpper ||
+                        position <= this.unstable_valueUpper) {
+                        this.value = position;
+                    }
+                    this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            value: this.value,
+                            intermediate: false,
+                        },
+                    }));
+                }
             }
         }
     }
     /**
      * Handles `pointerdown` event on the thumb to start dragging.
      */
-    _startDrag() {
-        this._dragging = true;
-        this._thumbNode.style.touchAction = 'none';
+    _startDrag(event) {
+        if (!this.readonly && !this.disabled) {
+            let eventContainer = event.target.id;
+            if (!eventContainer) {
+                const element = event.target.nodeName;
+                if (element == 'path' || element == 'svg') {
+                    eventContainer = event.target.parentElement.closest('.cds-custom--slider__thumb-wrapper').id;
+                }
+            }
+            if (eventContainer === 'thumb') {
+                this._dragging = true;
+                this._thumbNode.style.touchAction = 'none';
+            }
+            else {
+                this._draggingUpper = true;
+                this._thumbNodeUpper.style.touchAction = 'none';
+            }
+        }
     }
     /**
      * Handles `pointerdown` event on the track to update the thumb position and the value as necessary.
      */
     _handleClick(event) {
-        if (!this.disabled) {
+        let eventContainer = event.target.id;
+        if (!eventContainer) {
+            const element = event.target.nodeName;
+            if (element == 'path' || element == 'svg') {
+                eventContainer = event.target.parentElement.closest('.cds-custom--slider__thumb-wrapper').id;
+            }
+        }
+        if (!this.disabled && !this.readonly) {
             const { _trackNode: trackNode } = this;
             const isRtl = trackNode
                 .ownerDocument.defaultView.getComputedStyle(trackNode)
                 .getPropertyValue('direction') === 'rtl';
             const thumbPosition = event.clientX;
             const { left: trackLeft, width: trackWidth } = trackNode.getBoundingClientRect();
-            this._rate =
-                (isRtl
-                    ? trackLeft + trackWidth - thumbPosition
-                    : thumbPosition - trackLeft) / trackWidth;
-            this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    value: this.value,
-                },
-            }));
+            if (eventContainer === 'thumb-upper') {
+                this._rateUpper =
+                    (isRtl
+                        ? trackLeft + trackWidth - thumbPosition
+                        : thumbPosition - trackLeft) / trackWidth;
+                this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        value: this.unstable_valueUpper,
+                    },
+                }));
+            }
+            else {
+                if (!this.unstable_valueUpper) {
+                    this._rate =
+                        (isRtl
+                            ? trackLeft + trackWidth - thumbPosition
+                            : thumbPosition - trackLeft) / trackWidth;
+                    this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            value: this.value,
+                        },
+                    }));
+                }
+                else {
+                    if (!this.dragCoolDown) {
+                        const position = ((isRtl
+                            ? trackLeft + trackWidth - thumbPosition
+                            : thumbPosition - trackLeft) /
+                            trackWidth) *
+                            100;
+                        const differenceValue = position > this.value
+                            ? position - this.value
+                            : this.value - position;
+                        const differenceValueUpper = position > this.unstable_valueUpper
+                            ? position - this.unstable_valueUpper
+                            : this.unstable_valueUpper - position;
+                        if (differenceValue > differenceValueUpper) {
+                            this._rateUpper = position / 100;
+                        }
+                        else if (differenceValue < differenceValueUpper) {
+                            this._rate = position / 100;
+                        }
+                        else if (!this._dragging &&
+                            !this._draggingUpper &&
+                            differenceValue === differenceValueUpper) {
+                            Math.round(position) > this.unstable_valueUpper
+                                ? (this._rateUpper = position / 100)
+                                : (this._rate = position / 100);
+                        }
+                        this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
+                            bubbles: true,
+                            composed: true,
+                            detail: {
+                                value: this.value,
+                            },
+                        }));
+                    }
+                }
+            }
         }
     }
     /**
@@ -268,25 +466,46 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
      * @param event The event.
      */
     _handlePointermoveImpl(event) {
-        const { disabled, _dragging: dragging, _trackNode: trackNode } = this;
-        if (!disabled && dragging) {
+        const { disabled, _dragging: dragging, _trackNode: trackNode, _draggingUpper: draggingUpper, } = this;
+        if (!disabled) {
             const isRtl = trackNode
                 .ownerDocument.defaultView.getComputedStyle(trackNode)
                 .getPropertyValue('direction') === 'rtl';
             const thumbPosition = event.clientX;
             const { left: trackLeft, width: trackWidth } = this._trackNode.getBoundingClientRect();
-            this._rate =
-                (isRtl
+            if (dragging) {
+                const position = (isRtl
                     ? trackLeft + trackWidth - thumbPosition
                     : thumbPosition - trackLeft) / trackWidth;
-            this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    value: this.value,
-                    intermediate: true,
-                },
-            }));
+                if (!this.unstable_valueUpper ||
+                    position * 100 <= this.unstable_valueUpper) {
+                    this._rate = position;
+                    this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            value: this.value,
+                            intermediate: true,
+                        },
+                    }));
+                }
+            }
+            else if (draggingUpper) {
+                const position = (isRtl
+                    ? trackLeft + trackWidth - thumbPosition
+                    : thumbPosition - trackLeft) / trackWidth;
+                if (position * 100 >= this.value) {
+                    this._rateUpper = position;
+                    this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            value: this.unstable_valueUpper,
+                            intermediate: true,
+                        },
+                    }));
+                }
+            }
         }
     }
     /**
@@ -335,15 +554,27 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
         this.requestUpdate('stepMultiplier', oldstepMultiplier);
     }
     _getInputValidity(input) {
+        var _a;
+        const inputElement = (_a = input === null || input === void 0 ? void 0 : input.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
         if (this.invalid) {
             return false;
         }
-        if ((input === null || input === void 0 ? void 0 : input.valueAsNumber) > Number(this.max) ||
-            (input === null || input === void 0 ? void 0 : input.valueAsNumber) < Number(this.min)) {
+        if (input === null || input === void 0 ? void 0 : input.invalid) {
+            return false;
+        }
+        if ((inputElement === null || inputElement === void 0 ? void 0 : inputElement.valueAsNumber) > Number(this.max) ||
+            (inputElement === null || inputElement === void 0 ? void 0 : inputElement.valueAsNumber) < Number(this.min)) {
             return false;
         }
         return true;
     }
+    _getInputWarnigState(input) {
+        if ((input === null || input === void 0 ? void 0 : input.valueAsNumber) > Number(input.max) ||
+            (input === null || input === void 0 ? void 0 : input.valueAsNumber) < Number(input.min)) {
+            return true;
+        }
+        return false;
+    }
     connectedCallback() {
         super.connectedCallback();
         if (!this._throttledHandlePointermoveImpl) {
@@ -355,57 +586,93 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
             this._throttledHandlePointermoveImpl.cancel();
             this._throttledHandlePointermoveImpl = null;
         }
+        clearTimeout(this.dragCooldownTimeout);
         super.disconnectedCallback();
     }
-    shouldUpdate(changedProperties) {
+    updated() {
         var _a;
-        const input = this.querySelector(this.constructor.selectorInput);
-        if (changedProperties.has('disabled')) {
-            if (input) {
-                input.disabled = this.disabled;
+        const sliderfilledTrack = (_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${prefix}--slider__filled-track`);
+        if (sliderfilledTrack) {
+            if (this.unstable_valueUpper || this.unstable_valueUpper === '') {
+                sliderfilledTrack.style.transform = this.unstable_valueUpper
+                    ? `translate(${this._rate * 100}%, -50%) scaleX(${this._rateUpper - this._rate})`
+                    : `translate(0%, -50%) scaleX(${this._rate})`;
             }
-            if (this.disabled) {
-                this._dragging = false;
+            else {
+                sliderfilledTrack.style.transform = this.unstable_valueUpper
+                    ? `translate(${this._rate * 100}%, -50%) scaleX(${this._rateUpper - this._rate})`
+                    : `translate(0%, -50%) scaleX(${this._rate})`;
             }
         }
-        if (changedProperties.has('readonly')) {
-            if (input) {
-                input.readonly = this.readonly;
-            }
-            if (this.readonly) {
-                this._dragging = false;
-            }
-        }
-        if (input) {
-            ['max', 'min', 'step', 'value'].forEach((name) => {
-                if (changedProperties.has(name)) {
-                    input[name] = this[name];
+    }
+    shouldUpdate(changedProperties) {
+        const inputs = this.querySelectorAll(this.constructor.selectorInput);
+        inputs.forEach((input, index) => {
+            if (changedProperties.has('disabled')) {
+                if (input) {
+                    input.disabled = this.disabled;
                 }
-            });
-            if (changedProperties.has('value') ||
-                changedProperties.has('invalid') ||
-                changedProperties.has('warn') ||
-                changedProperties.has('readonly')) {
-                const innerInput = (_a = input === null || input === void 0 ? void 0 : input.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-                this.isValid = this._getInputValidity(innerInput);
-                if (!this.readonly && !this.isValid) {
-                    input.invalid = true;
+                if (this.disabled) {
+                    this._dragging = false;
                 }
-                else {
-                    input.invalid = false;
+            }
+            if (changedProperties.has('readonly')) {
+                if (input) {
+                    input.readonly = this.readonly;
+                }
+                if (this.readonly) {
+                    this._dragging = false;
                 }
-                if (!this.readonly && !this.invalid && this.warn && this.isValid) {
-                    input.warn = true;
+            }
+            if (changedProperties.has('invalid')) {
+                input.invalid = this.invalid;
+            }
+            if (changedProperties.has('hideTextInput')) {
+                input.hideTextInput = this.hideTextInput;
+            }
+            if (input) {
+                if ((this.unstable_valueUpper || this.unstable_valueUpper === '') &&
+                    index > 0) {
+                    ['max', 'min', 'step', 'unstable_valueUpper'].forEach((name) => {
+                        if (name === 'unstable_valueUpper') {
+                            input.value = this.unstable_valueUpper;
+                        }
+                        else if (name === 'min') {
+                            input[name] = this.value;
+                        }
+                        else {
+                            input[name] = this[name];
+                        }
+                    });
                 }
                 else {
-                    input.warn = false;
+                    ['max', 'min', 'step', 'value'].forEach((name) => {
+                        if (this.unstable_valueUpper && name === 'max') {
+                            input[name] = this.unstable_valueUpper;
+                        }
+                        else {
+                            input[name] = this[name];
+                        }
+                    });
+                }
+                if (changedProperties.has('value') ||
+                    changedProperties.has('invalid') ||
+                    changedProperties.has('warn') ||
+                    changedProperties.has('readonly')) {
+                    this.isValid = this._getInputValidity(input);
+                    if (!this.readonly && !this.isValid) {
+                        input.invalid = true;
+                    }
+                    else {
+                        input.invalid = false;
+                    }
                 }
             }
-        }
+        });
         return true;
     }
     render() {
-        const { disabled, formatMaxText, formatMinText, labelText, hideLabel, max, min, maxLabel, minLabel, readonly, invalidText, isValid, warn, warnText, value, _rate: rate, _handleClickLabel: handleClickLabel, _handleKeydown: handleKeydown, _handleClick: handleClick, _startDrag: startDrag, _endDrag: endDrag, } = this;
+        const { disabled, formatMaxText, formatMinText, labelText, hideLabel, max, min, maxLabel, minLabel, readonly, invalidText, isValid, warn, warnText, value, unstable_valueUpper, _rate: rate, _rateUpper: rateUpper, _handleClickLabel: handleClickLabel, _handleKeydown: handleKeydown, _handleClick: handleClick, onDrag, _endDrag: endDrag, } = this;
         const labelClasses = classMap({
             [`${prefix}--label`]: true,
             [`${prefix}--visually-hidden`]: hideLabel,
@@ -416,11 +683,27 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
             [`${prefix}--slider--disabled`]: disabled,
             [`${prefix}--slider--readonly`]: readonly,
         });
+        const thumbLowerClasses = classMap({
+            [`${prefix}--icon-tooltip`]: unstable_valueUpper || unstable_valueUpper === '',
+            [`${prefix}--slider__thumb-wrapper`]: unstable_valueUpper || unstable_valueUpper === '',
+            [`${prefix}--slider__thumb-wrapper--lower`]: unstable_valueUpper || unstable_valueUpper === '',
+            [`${prefix}--slider__thumb`]: !(unstable_valueUpper || unstable_valueUpper === ''),
+            [`${prefix}--slider__thumb-disabled`]: disabled,
+        });
+        const thumbUpperClasses = classMap({
+            [`${prefix}--icon-tooltip`]: true,
+            [`${prefix}--slider__thumb-wrapper`]: true,
+            [`${prefix}--slider__thumb-wrapper--upper`]: true,
+            [`${prefix}--slider__thumb-disabled`]: disabled,
+        });
         return html `
       <label class="${labelClasses}" @click="${handleClickLabel}">
         <slot name="label-text">${labelText}</slot>
       </label>
       <div class="${prefix}--slider-container">
+        ${unstable_valueUpper || unstable_valueUpper === ''
+            ? html ` <slot name="lower-input"></slot>`
+            : ''}
         <span class="${prefix}--slider__range-label">
           <slot name="min-text">${formatMinText(min, minLabel)}</slot>
         </span>
@@ -434,20 +717,82 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
           role="presentation">
           <div
             id="thumb"
-            class="${prefix}--slider__thumb"
+            class="${thumbLowerClasses}"
             role="slider"
             tabindex="${!readonly ? 0 : -1}"
             aria-valuemax="${max}"
             aria-valuemin="${min}"
             aria-valuenow="${value}"
             style="left: ${rate * 100}%"
-            @pointerdown="${startDrag}"></div>
-          <div id="track" class="${prefix}--slider__track"></div>
-          <div class="${prefix}-ce--slider__filled-track-container">
-            <div
-              class="${prefix}--slider__filled-track"
-              style="transform: translate(0%, -50%) scaleX(${rate})"></div>
+            @pointerdown="${onDrag}">
+            ${(unstable_valueUpper || unstable_valueUpper === '') && !readonly
+            ? html `
+                  <div class="${prefix}--slider__thumb--lower">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 24"
+                      class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower">
+                      <path
+                        d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
+                      <path fill="none" d="M-4 0h24v24H-4z"></path>
+                    </svg>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 24"
+                      class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower cds-custom--slider__thumb-icon--focus">
+                      <path
+                        d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
+                      <path fill="none" d="M-4 0h24v24H-4z"></path>
+                      <path d="M15.08 0H16v6.46h-.92z"></path>
+                      <path d="M0 0h.92v24H0zM15.08 0H16v24h-.92z"></path>
+                      <path d="M0 .92V0h16v.92zM0 24v-.92h16V24z"></path>
+                    </svg>
+                  </div>
+                `
+            : ``}
           </div>
+          ${(unstable_valueUpper || unstable_valueUpper === '') && !readonly
+            ? html `
+                <div
+                  id="thumb-upper"
+                  class="${thumbUpperClasses}"
+                  role="slider"
+                  tabindex="${!readonly ? 0 : -1}"
+                  aria-valuemax="${max}"
+                  aria-valuemin="${min}"
+                  aria-valuenow="${unstable_valueUpper}"
+                  style="left: ${rateUpper * 100}%"
+                  @pointerdown="${onDrag}">
+                  <div class="${prefix}--slider__thumb--upper">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 24"
+                      class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper">
+                      <path
+                        d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
+                      <path fill="none" d="M-4 0h24v24H-4z"></path>
+                    </svg>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 24"
+                      class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper cds-custom--slider__thumb-icon--focus">
+                      <path
+                        d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
+                      <path fill="none" d="M-4 0h24v24H-4z"></path>
+                      <path d="M.92 24H0v-6.46h.92z"></path>
+                      <path d="M16 24h-.92V0H16zM.92 24H0V0h.92z"></path>
+                      <path d="M16 23.08V24H0v-.92zM16 0v.92H0V0z"></path>
+                    </svg>
+                  </div>
+                </div>
+              `
+            : html ``}
+          <div id="track" class="${prefix}--slider__track"></div>
+          ${unstable_valueUpper || unstable_valueUpper === ''
+            ? html ` <div class="${prefix}--slider__filled-track"></div> `
+            : html ` <div class="${prefix}-ce--slider__filled-track-container">
+                <div class="${prefix}--slider__filled-track"></div>
+              </div>`}
         </div>
         <span class="${prefix}--slider__range-label">
           <slot name="max-text">${formatMaxText(max, maxLabel)}</slot>
@@ -492,9 +837,15 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
 };
 CDSSlider.shadowRootOptions = Object.assign(Object.assign({}, LitElement.shadowRootOptions), { delegatesFocus: true });
 CDSSlider.styles = styles;
+__decorate([
+    property({ type: Number, attribute: 'value-upper' })
+], CDSSlider.prototype, "unstable_valueUpper", void 0);
 __decorate([
     query('#thumb')
 ], CDSSlider.prototype, "_thumbNode", void 0);
+__decorate([
+    query('#thumb-upper')
+], CDSSlider.prototype, "_thumbNodeUpper", void 0);
 __decorate([
     query('#track')
 ], CDSSlider.prototype, "_trackNode", void 0);
@@ -554,6 +905,9 @@ __decorate([
 __decorate([
     property({ attribute: 'warn-text' })
 ], CDSSlider.prototype, "warnText", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-text-input', reflect: true })
+], CDSSlider.prototype, "hideTextInput", void 0);
 __decorate([
     property({ type: Number, reflect: true })
 ], CDSSlider.prototype, "step", null);