@limetech/lime-elements 39.10.3 → 39.11.0

package/dist/cjs/limel-slider.cjs.entry.js

@@ -2,1335 +2,6 @@
 
 var index = require('./index-BjHIBY-I.js');
 var randomString = require('./random-string-BTzDB2ee.js');
-var ponyfill = require('./ponyfill-BgIFyUG5.js');
-var component = require('./component-y8swlNNR.js');
-var animationframe = require('./animationframe-ChtL6ouH.js');
-var util = require('./util-BOQp7lfZ.js');
-
-/**
- * @license
- * Copyright 2020 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-/** Slider element classes. */
-var cssClasses = {
-    DISABLED: 'mdc-slider--disabled',
-    DISCRETE: 'mdc-slider--discrete',
-    INPUT: 'mdc-slider__input',
-    RANGE: 'mdc-slider--range',
-    THUMB: 'mdc-slider__thumb',
-    // Applied when thumb is in the focused state.
-    THUMB_FOCUSED: 'mdc-slider__thumb--focused',
-    THUMB_KNOB: 'mdc-slider__thumb-knob',
-    // Class added to the top thumb (for overlapping thumbs in range slider).
-    THUMB_TOP: 'mdc-slider__thumb--top',
-    THUMB_WITH_INDICATOR: 'mdc-slider__thumb--with-indicator',
-    TICK_MARKS: 'mdc-slider--tick-marks',
-    TICK_MARKS_CONTAINER: 'mdc-slider__tick-marks',
-    TICK_MARK_ACTIVE: 'mdc-slider__tick-mark--active',
-    TICK_MARK_INACTIVE: 'mdc-slider__tick-mark--inactive',
-    TRACK: 'mdc-slider__track',
-    // The active track fill element that will be scaled as the value changes.
-    TRACK_ACTIVE: 'mdc-slider__track--active_fill',
-    VALUE_INDICATOR_TEXT: 'mdc-slider__value-indicator-text',
-};
-/** Slider numbers. */
-var numbers = {
-    // Default step size.
-    STEP_SIZE: 1,
-    // Minimum absolute difference between clientX of move event / down event
-    // for which to update thumb, in the case of overlapping thumbs.
-    // This is needed to reduce chances of choosing the thumb based on
-    // pointer jitter.
-    THUMB_UPDATE_MIN_PX: 5,
-};
-/** Slider attributes. */
-var attributes = {
-    ARIA_VALUETEXT: 'aria-valuetext',
-    INPUT_DISABLED: 'disabled',
-    INPUT_MIN: 'min',
-    INPUT_MAX: 'max',
-    INPUT_VALUE: 'value',
-    INPUT_STEP: 'step',
-};
-/** Slider events. */
-var events = {
-    CHANGE: 'MDCSlider:change',
-    INPUT: 'MDCSlider:input',
-};
-
-/**
- * @license
- * Copyright 2020 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-/** Tick mark enum, for discrete sliders. */
-var TickMark;
-(function (TickMark) {
-    TickMark[TickMark["ACTIVE"] = 0] = "ACTIVE";
-    TickMark[TickMark["INACTIVE"] = 1] = "INACTIVE";
-})(TickMark || (TickMark = {}));
-/**
- * Thumb types: range slider has two thumbs (START, END) whereas single point
- * slider only has one thumb (END).
- */
-var Thumb;
-(function (Thumb) {
-    // Thumb at start of slider (e.g. in LTR mode, left thumb on range slider).
-    Thumb[Thumb["START"] = 1] = "START";
-    // Thumb at end of slider (e.g. in LTR mode, right thumb on range slider,
-    // or only thumb on single point slider).
-    Thumb[Thumb["END"] = 2] = "END";
-})(Thumb || (Thumb = {}));
-
-/**
- * @license
- * Copyright 2020 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-var AnimationKeys;
-(function (AnimationKeys) {
-    AnimationKeys["SLIDER_UPDATE"] = "slider_update";
-})(AnimationKeys || (AnimationKeys = {}));
-// Accessing `window` without a `typeof` check will throw on Node environments.
-var HAS_WINDOW = typeof window !== 'undefined';
-/**
- * Foundation class for slider. Responsibilities include:
- * - Updating slider values (internal state and DOM updates) based on client
- *   'x' position.
- * - Updating DOM after slider property updates (e.g. min, max).
- */
-var MDCSliderFoundation = /** @class */ (function (_super) {
-    ponyfill.__extends(MDCSliderFoundation, _super);
-    function MDCSliderFoundation(adapter) {
-        var _this = _super.call(this, ponyfill.__assign(ponyfill.__assign({}, MDCSliderFoundation.defaultAdapter), adapter)) || this;
-        // Whether the initial styles (to position the thumb, before component
-        // initialization) have been removed.
-        _this.initialStylesRemoved = false;
-        _this.isDisabled = false;
-        _this.isDiscrete = false;
-        _this.step = numbers.STEP_SIZE;
-        _this.hasTickMarks = false;
-        // The following properties are only set for range sliders.
-        _this.isRange = false;
-        // Tracks the thumb being moved across a slider pointer interaction (down,
-        // move event).
-        _this.thumb = null;
-        // `clientX` from the most recent down event. Used in subsequent move
-        // events to determine which thumb to move (in the case of
-        // overlapping thumbs).
-        _this.downEventClientX = null;
-        // Width of the start thumb knob.
-        _this.startThumbKnobWidth = 0;
-        // Width of the end thumb knob.
-        _this.endThumbKnobWidth = 0;
-        _this.animFrame = new animationframe.AnimationFrame();
-        return _this;
-    }
-    Object.defineProperty(MDCSliderFoundation, "defaultAdapter", {
-        get: function () {
-            // tslint:disable:object-literal-sort-keys Methods should be in the same
-            // order as the adapter interface.
-            return {
-                hasClass: function () { return false; },
-                addClass: function () { return undefined; },
-                removeClass: function () { return undefined; },
-                addThumbClass: function () { return undefined; },
-                removeThumbClass: function () { return undefined; },
-                getAttribute: function () { return null; },
-                getInputValue: function () { return ''; },
-                setInputValue: function () { return undefined; },
-                getInputAttribute: function () { return null; },
-                setInputAttribute: function () { return null; },
-                removeInputAttribute: function () { return null; },
-                focusInput: function () { return undefined; },
-                isInputFocused: function () { return false; },
-                getThumbKnobWidth: function () { return 0; },
-                getThumbBoundingClientRect: function () {
-                    return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
-                },
-                getBoundingClientRect: function () {
-                    return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
-                },
-                isRTL: function () { return false; },
-                setThumbStyleProperty: function () { return undefined; },
-                removeThumbStyleProperty: function () { return undefined; },
-                setTrackActiveStyleProperty: function () { return undefined; },
-                removeTrackActiveStyleProperty: function () { return undefined; },
-                setValueIndicatorText: function () { return undefined; },
-                getValueToAriaValueTextFn: function () { return null; },
-                updateTickMarks: function () { return undefined; },
-                setPointerCapture: function () { return undefined; },
-                emitChangeEvent: function () { return undefined; },
-                emitInputEvent: function () { return undefined; },
-                emitDragStartEvent: function () { return undefined; },
-                emitDragEndEvent: function () { return undefined; },
-                registerEventHandler: function () { return undefined; },
-                deregisterEventHandler: function () { return undefined; },
-                registerThumbEventHandler: function () { return undefined; },
-                deregisterThumbEventHandler: function () { return undefined; },
-                registerInputEventHandler: function () { return undefined; },
-                deregisterInputEventHandler: function () { return undefined; },
-                registerBodyEventHandler: function () { return undefined; },
-                deregisterBodyEventHandler: function () { return undefined; },
-                registerWindowEventHandler: function () { return undefined; },
-                deregisterWindowEventHandler: function () { return undefined; },
-            };
-            // tslint:enable:object-literal-sort-keys
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MDCSliderFoundation.prototype.init = function () {
-        var _this = this;
-        this.isDisabled = this.adapter.hasClass(cssClasses.DISABLED);
-        this.isDiscrete = this.adapter.hasClass(cssClasses.DISCRETE);
-        this.hasTickMarks = this.adapter.hasClass(cssClasses.TICK_MARKS);
-        this.isRange = this.adapter.hasClass(cssClasses.RANGE);
-        var min = this.convertAttributeValueToNumber(this.adapter.getInputAttribute(attributes.INPUT_MIN, this.isRange ? Thumb.START : Thumb.END), attributes.INPUT_MIN);
-        var max = this.convertAttributeValueToNumber(this.adapter.getInputAttribute(attributes.INPUT_MAX, Thumb.END), attributes.INPUT_MAX);
-        var value = this.convertAttributeValueToNumber(this.adapter.getInputAttribute(attributes.INPUT_VALUE, Thumb.END), attributes.INPUT_VALUE);
-        var valueStart = this.isRange ?
-            this.convertAttributeValueToNumber(this.adapter.getInputAttribute(attributes.INPUT_VALUE, Thumb.START), attributes.INPUT_VALUE) :
-            min;
-        var stepAttr = this.adapter.getInputAttribute(attributes.INPUT_STEP, Thumb.END);
-        var step = stepAttr ?
-            this.convertAttributeValueToNumber(stepAttr, attributes.INPUT_STEP) :
-            this.step;
-        this.validateProperties({ min: min, max: max, value: value, valueStart: valueStart, step: step });
-        this.min = min;
-        this.max = max;
-        this.value = value;
-        this.valueStart = valueStart;
-        this.step = step;
-        this.numDecimalPlaces = getNumDecimalPlaces(this.step);
-        this.valueBeforeDownEvent = value;
-        this.valueStartBeforeDownEvent = valueStart;
-        this.mousedownOrTouchstartListener =
-            this.handleMousedownOrTouchstart.bind(this);
-        this.moveListener = this.handleMove.bind(this);
-        this.pointerdownListener = this.handlePointerdown.bind(this);
-        this.pointerupListener = this.handlePointerup.bind(this);
-        this.thumbMouseenterListener = this.handleThumbMouseenter.bind(this);
-        this.thumbMouseleaveListener = this.handleThumbMouseleave.bind(this);
-        this.inputStartChangeListener = function () {
-            _this.handleInputChange(Thumb.START);
-        };
-        this.inputEndChangeListener = function () {
-            _this.handleInputChange(Thumb.END);
-        };
-        this.inputStartFocusListener = function () {
-            _this.handleInputFocus(Thumb.START);
-        };
-        this.inputEndFocusListener = function () {
-            _this.handleInputFocus(Thumb.END);
-        };
-        this.inputStartBlurListener = function () {
-            _this.handleInputBlur(Thumb.START);
-        };
-        this.inputEndBlurListener = function () {
-            _this.handleInputBlur(Thumb.END);
-        };
-        this.resizeListener = this.handleResize.bind(this);
-        this.registerEventHandlers();
-    };
-    MDCSliderFoundation.prototype.destroy = function () {
-        this.deregisterEventHandlers();
-    };
-    MDCSliderFoundation.prototype.setMin = function (value) {
-        this.min = value;
-        if (!this.isRange) {
-            this.valueStart = value;
-        }
-        this.updateUI();
-    };
-    MDCSliderFoundation.prototype.setMax = function (value) {
-        this.max = value;
-        this.updateUI();
-    };
-    MDCSliderFoundation.prototype.getMin = function () {
-        return this.min;
-    };
-    MDCSliderFoundation.prototype.getMax = function () {
-        return this.max;
-    };
-    /**
-     * - For single point sliders, returns the thumb value.
-     * - For range (two-thumb) sliders, returns the end thumb's value.
-     */
-    MDCSliderFoundation.prototype.getValue = function () {
-        return this.value;
-    };
-    /**
-     * - For single point sliders, sets the thumb value.
-     * - For range (two-thumb) sliders, sets the end thumb's value.
-     */
-    MDCSliderFoundation.prototype.setValue = function (value) {
-        if (this.isRange && value < this.valueStart) {
-            throw new Error("end thumb value (" + value + ") must be >= start thumb " +
-                ("value (" + this.valueStart + ")"));
-        }
-        this.updateValue(value, Thumb.END);
-    };
-    /**
-     * Only applicable for range sliders.
-     * @return The start thumb's value.
-     */
-    MDCSliderFoundation.prototype.getValueStart = function () {
-        if (!this.isRange) {
-            throw new Error('`valueStart` is only applicable for range sliders.');
-        }
-        return this.valueStart;
-    };
-    /**
-     * Only applicable for range sliders. Sets the start thumb's value.
-     */
-    MDCSliderFoundation.prototype.setValueStart = function (valueStart) {
-        if (!this.isRange) {
-            throw new Error('`valueStart` is only applicable for range sliders.');
-        }
-        if (this.isRange && valueStart > this.value) {
-            throw new Error("start thumb value (" + valueStart + ") must be <= end thumb " +
-                ("value (" + this.value + ")"));
-        }
-        this.updateValue(valueStart, Thumb.START);
-    };
-    MDCSliderFoundation.prototype.setStep = function (value) {
-        this.step = value;
-        this.numDecimalPlaces = getNumDecimalPlaces(value);
-        this.updateUI();
-    };
-    MDCSliderFoundation.prototype.setIsDiscrete = function (value) {
-        this.isDiscrete = value;
-        this.updateValueIndicatorUI();
-        this.updateTickMarksUI();
-    };
-    MDCSliderFoundation.prototype.getStep = function () {
-        return this.step;
-    };
-    MDCSliderFoundation.prototype.setHasTickMarks = function (value) {
-        this.hasTickMarks = value;
-        this.updateTickMarksUI();
-    };
-    MDCSliderFoundation.prototype.getDisabled = function () {
-        return this.isDisabled;
-    };
-    /**
-     * Sets disabled state, including updating styles and thumb tabindex.
-     */
-    MDCSliderFoundation.prototype.setDisabled = function (disabled) {
-        this.isDisabled = disabled;
-        if (disabled) {
-            this.adapter.addClass(cssClasses.DISABLED);
-            if (this.isRange) {
-                this.adapter.setInputAttribute(attributes.INPUT_DISABLED, '', Thumb.START);
-            }
-            this.adapter.setInputAttribute(attributes.INPUT_DISABLED, '', Thumb.END);
-        }
-        else {
-            this.adapter.removeClass(cssClasses.DISABLED);
-            if (this.isRange) {
-                this.adapter.removeInputAttribute(attributes.INPUT_DISABLED, Thumb.START);
-            }
-            this.adapter.removeInputAttribute(attributes.INPUT_DISABLED, Thumb.END);
-        }
-    };
-    /** @return Whether the slider is a range slider. */
-    MDCSliderFoundation.prototype.getIsRange = function () {
-        return this.isRange;
-    };
-    /**
-     * - Syncs slider boundingClientRect with the current DOM.
-     * - Updates UI based on internal state.
-     */
-    MDCSliderFoundation.prototype.layout = function (_a) {
-        var _b = _a === void 0 ? {} : _a, skipUpdateUI = _b.skipUpdateUI;
-        this.rect = this.adapter.getBoundingClientRect();
-        if (this.isRange) {
-            this.startThumbKnobWidth = this.adapter.getThumbKnobWidth(Thumb.START);
-            this.endThumbKnobWidth = this.adapter.getThumbKnobWidth(Thumb.END);
-        }
-        if (!skipUpdateUI) {
-            this.updateUI();
-        }
-    };
-    /** Handles resize events on the window. */
-    MDCSliderFoundation.prototype.handleResize = function () {
-        this.layout();
-    };
-    /**
-     * Handles pointer down events on the slider root element.
-     */
-    MDCSliderFoundation.prototype.handleDown = function (event) {
-        if (this.isDisabled)
-            return;
-        this.valueStartBeforeDownEvent = this.valueStart;
-        this.valueBeforeDownEvent = this.value;
-        var clientX = event.clientX != null ?
-            event.clientX :
-            event.targetTouches[0].clientX;
-        this.downEventClientX = clientX;
-        var value = this.mapClientXOnSliderScale(clientX);
-        this.thumb = this.getThumbFromDownEvent(clientX, value);
-        if (this.thumb === null)
-            return;
-        this.handleDragStart(event, value, this.thumb);
-        this.updateValue(value, this.thumb, { emitInputEvent: true });
-    };
-    /**
-     * Handles pointer move events on the slider root element.
-     */
-    MDCSliderFoundation.prototype.handleMove = function (event) {
-        if (this.isDisabled)
-            return;
-        // Prevent scrolling.
-        event.preventDefault();
-        var clientX = event.clientX != null ?
-            event.clientX :
-            event.targetTouches[0].clientX;
-        var dragAlreadyStarted = this.thumb != null;
-        this.thumb = this.getThumbFromMoveEvent(clientX);
-        if (this.thumb === null)
-            return;
-        var value = this.mapClientXOnSliderScale(clientX);
-        if (!dragAlreadyStarted) {
-            this.handleDragStart(event, value, this.thumb);
-            this.adapter.emitDragStartEvent(value, this.thumb);
-        }
-        this.updateValue(value, this.thumb, { emitInputEvent: true });
-    };
-    /**
-     * Handles pointer up events on the slider root element.
-     */
-    MDCSliderFoundation.prototype.handleUp = function () {
-        if (this.isDisabled || this.thumb === null)
-            return;
-        var oldValue = this.thumb === Thumb.START ?
-            this.valueStartBeforeDownEvent :
-            this.valueBeforeDownEvent;
-        var newValue = this.thumb === Thumb.START ? this.valueStart : this.value;
-        if (oldValue !== newValue) {
-            this.adapter.emitChangeEvent(newValue, this.thumb);
-        }
-        this.adapter.emitDragEndEvent(newValue, this.thumb);
-        this.thumb = null;
-    };
-    /**
-     * For range, discrete slider, shows the value indicator on both thumbs.
-     */
-    MDCSliderFoundation.prototype.handleThumbMouseenter = function () {
-        if (!this.isDiscrete || !this.isRange)
-            return;
-        this.adapter.addThumbClass(cssClasses.THUMB_WITH_INDICATOR, Thumb.START);
-        this.adapter.addThumbClass(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);
-    };
-    /**
-     * For range, discrete slider, hides the value indicator on both thumbs.
-     */
-    MDCSliderFoundation.prototype.handleThumbMouseleave = function () {
-        if (!this.isDiscrete || !this.isRange)
-            return;
-        if (this.adapter.isInputFocused(Thumb.START) ||
-            this.adapter.isInputFocused(Thumb.END)) {
-            // Leave value indicator shown if either input is focused.
-            return;
-        }
-        this.adapter.removeThumbClass(cssClasses.THUMB_WITH_INDICATOR, Thumb.START);
-        this.adapter.removeThumbClass(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);
-    };
-    MDCSliderFoundation.prototype.handleMousedownOrTouchstart = function (event) {
-        var _this = this;
-        var moveEventType = event.type === 'mousedown' ? 'mousemove' : 'touchmove';
-        // After a down event on the slider root, listen for move events on
-        // body (so the slider value is updated for events outside of the
-        // slider root).
-        this.adapter.registerBodyEventHandler(moveEventType, this.moveListener);
-        var upHandler = function () {
-            _this.handleUp();
-            // Once the drag is finished (up event on body), remove the move
-            // handler.
-            _this.adapter.deregisterBodyEventHandler(moveEventType, _this.moveListener);
-            // Also stop listening for subsequent up events.
-            _this.adapter.deregisterEventHandler('mouseup', upHandler);
-            _this.adapter.deregisterEventHandler('touchend', upHandler);
-        };
-        this.adapter.registerBodyEventHandler('mouseup', upHandler);
-        this.adapter.registerBodyEventHandler('touchend', upHandler);
-        this.handleDown(event);
-    };
-    MDCSliderFoundation.prototype.handlePointerdown = function (event) {
-        this.adapter.setPointerCapture(event.pointerId);
-        this.adapter.registerEventHandler('pointermove', this.moveListener);
-        this.handleDown(event);
-    };
-    /**
-     * Handles input `change` event by setting internal slider value to match
-     * input's new value.
-     */
-    MDCSliderFoundation.prototype.handleInputChange = function (thumb) {
-        var value = Number(this.adapter.getInputValue(thumb));
-        if (thumb === Thumb.START) {
-            this.setValueStart(value);
-        }
-        else {
-            this.setValue(value);
-        }
-        this.adapter.emitChangeEvent(thumb === Thumb.START ? this.valueStart : this.value, thumb);
-        this.adapter.emitInputEvent(thumb === Thumb.START ? this.valueStart : this.value, thumb);
-    };
-    /** Shows activated state and value indicator on thumb(s). */
-    MDCSliderFoundation.prototype.handleInputFocus = function (thumb) {
-        this.adapter.addThumbClass(cssClasses.THUMB_FOCUSED, thumb);
-        if (!this.isDiscrete)
-            return;
-        this.adapter.addThumbClass(cssClasses.THUMB_WITH_INDICATOR, thumb);
-        if (this.isRange) {
-            var otherThumb = thumb === Thumb.START ? Thumb.END : Thumb.START;
-            this.adapter.addThumbClass(cssClasses.THUMB_WITH_INDICATOR, otherThumb);
-        }
-    };
-    /** Removes activated state and value indicator from thumb(s). */
-    MDCSliderFoundation.prototype.handleInputBlur = function (thumb) {
-        this.adapter.removeThumbClass(cssClasses.THUMB_FOCUSED, thumb);
-        if (!this.isDiscrete)
-            return;
-        this.adapter.removeThumbClass(cssClasses.THUMB_WITH_INDICATOR, thumb);
-        if (this.isRange) {
-            var otherThumb = thumb === Thumb.START ? Thumb.END : Thumb.START;
-            this.adapter.removeThumbClass(cssClasses.THUMB_WITH_INDICATOR, otherThumb);
-        }
-    };
-    /**
-     * Emits custom dragStart event, along with focusing the underlying input.
-     */
-    MDCSliderFoundation.prototype.handleDragStart = function (event, value, thumb) {
-        this.adapter.emitDragStartEvent(value, thumb);
-        this.adapter.focusInput(thumb);
-        // Prevent the input (that we just focused) from losing focus.
-        event.preventDefault();
-    };
-    /**
-     * @return The thumb to be moved based on initial down event.
-     */
-    MDCSliderFoundation.prototype.getThumbFromDownEvent = function (clientX, value) {
-        // For single point slider, thumb to be moved is always the END (only)
-        // thumb.
-        if (!this.isRange)
-            return Thumb.END;
-        // Check if event press point is in the bounds of any thumb.
-        var thumbStartRect = this.adapter.getThumbBoundingClientRect(Thumb.START);
-        var thumbEndRect = this.adapter.getThumbBoundingClientRect(Thumb.END);
-        var inThumbStartBounds = clientX >= thumbStartRect.left && clientX <= thumbStartRect.right;
-        var inThumbEndBounds = clientX >= thumbEndRect.left && clientX <= thumbEndRect.right;
-        if (inThumbStartBounds && inThumbEndBounds) {
-            // Thumbs overlapping. Thumb to be moved cannot be determined yet.
-            return null;
-        }
-        // If press is in bounds for either thumb on down event, that's the thumb
-        // to be moved.
-        if (inThumbStartBounds) {
-            return Thumb.START;
-        }
-        if (inThumbEndBounds) {
-            return Thumb.END;
-        }
-        // For presses outside the range, return whichever thumb is closer.
-        if (value < this.valueStart) {
-            return Thumb.START;
-        }
-        if (value > this.value) {
-            return Thumb.END;
-        }
-        // For presses inside the range, return whichever thumb is closer.
-        return (value - this.valueStart <= this.value - value) ? Thumb.START :
-            Thumb.END;
-    };
-    /**
-     * @return The thumb to be moved based on move event (based on drag
-     *     direction from original down event). Only applicable if thumbs
-     *     were overlapping in the down event.
-     */
-    MDCSliderFoundation.prototype.getThumbFromMoveEvent = function (clientX) {
-        // Thumb has already been chosen.
-        if (this.thumb !== null)
-            return this.thumb;
-        if (this.downEventClientX === null) {
-            throw new Error('`downEventClientX` is null after move event.');
-        }
-        var moveDistanceUnderThreshold = Math.abs(this.downEventClientX - clientX) < numbers.THUMB_UPDATE_MIN_PX;
-        if (moveDistanceUnderThreshold)
-            return this.thumb;
-        var draggedThumbToLeft = clientX < this.downEventClientX;
-        if (draggedThumbToLeft) {
-            return this.adapter.isRTL() ? Thumb.END : Thumb.START;
-        }
-        else {
-            return this.adapter.isRTL() ? Thumb.START : Thumb.END;
-        }
-    };
-    /**
-     * Updates UI based on internal state.
-     * @param thumb Thumb whose value is being updated. If undefined, UI is
-     *     updated for both thumbs based on current internal state.
-     */
-    MDCSliderFoundation.prototype.updateUI = function (thumb) {
-        this.updateThumbAndInputAttributes(thumb);
-        this.updateThumbAndTrackUI(thumb);
-        this.updateValueIndicatorUI(thumb);
-        this.updateTickMarksUI();
-    };
-    /**
-     * Updates thumb and input attributes based on current value.
-     * @param thumb Thumb whose aria attributes to update.
-     */
-    MDCSliderFoundation.prototype.updateThumbAndInputAttributes = function (thumb) {
-        if (!thumb)
-            return;
-        var value = this.isRange && thumb === Thumb.START ? this.valueStart : this.value;
-        var valueStr = String(value);
-        this.adapter.setInputAttribute(attributes.INPUT_VALUE, valueStr, thumb);
-        if (this.isRange && thumb === Thumb.START) {
-            this.adapter.setInputAttribute(attributes.INPUT_MIN, valueStr, Thumb.END);
-        }
-        else if (this.isRange && thumb === Thumb.END) {
-            this.adapter.setInputAttribute(attributes.INPUT_MAX, valueStr, Thumb.START);
-        }
-        // Sync attribute with property.
-        if (this.adapter.getInputValue(thumb) !== valueStr) {
-            this.adapter.setInputValue(valueStr, thumb);
-        }
-        var valueToAriaValueTextFn = this.adapter.getValueToAriaValueTextFn();
-        if (valueToAriaValueTextFn) {
-            this.adapter.setInputAttribute(attributes.ARIA_VALUETEXT, valueToAriaValueTextFn(value), thumb);
-        }
-    };
-    /**
-     * Updates value indicator UI based on current value.
-     * @param thumb Thumb whose value indicator to update. If undefined, all
-     *     thumbs' value indicators are updated.
-     */
-    MDCSliderFoundation.prototype.updateValueIndicatorUI = function (thumb) {
-        if (!this.isDiscrete)
-            return;
-        var value = this.isRange && thumb === Thumb.START ? this.valueStart : this.value;
-        this.adapter.setValueIndicatorText(value, thumb === Thumb.START ? Thumb.START : Thumb.END);
-        if (!thumb && this.isRange) {
-            this.adapter.setValueIndicatorText(this.valueStart, Thumb.START);
-        }
-    };
-    /**
-     * Updates tick marks UI within slider, based on current min, max, and step.
-     */
-    MDCSliderFoundation.prototype.updateTickMarksUI = function () {
-        if (!this.isDiscrete || !this.hasTickMarks)
-            return;
-        var numTickMarksInactiveStart = (this.valueStart - this.min) / this.step;
-        var numTickMarksActive = (this.value - this.valueStart) / this.step + 1;
-        var numTickMarksInactiveEnd = (this.max - this.value) / this.step;
-        var tickMarksInactiveStart = Array.from({ length: numTickMarksInactiveStart })
-            .fill(TickMark.INACTIVE);
-        var tickMarksActive = Array.from({ length: numTickMarksActive })
-            .fill(TickMark.ACTIVE);
-        var tickMarksInactiveEnd = Array.from({ length: numTickMarksInactiveEnd })
-            .fill(TickMark.INACTIVE);
-        this.adapter.updateTickMarks(tickMarksInactiveStart.concat(tickMarksActive)
-            .concat(tickMarksInactiveEnd));
-    };
-    /** Maps clientX to a value on the slider scale. */
-    MDCSliderFoundation.prototype.mapClientXOnSliderScale = function (clientX) {
-        var xPos = clientX - this.rect.left;
-        var pctComplete = xPos / this.rect.width;
-        if (this.adapter.isRTL()) {
-            pctComplete = 1 - pctComplete;
-        }
-        // Fit the percentage complete between the range [min,max]
-        // by remapping from [0, 1] to [min, min+(max-min)].
-        var value = this.min + pctComplete * (this.max - this.min);
-        if (value === this.max || value === this.min) {
-            return value;
-        }
-        return Number(this.quantize(value).toFixed(this.numDecimalPlaces));
-    };
-    /** Calculates the quantized value based on step value. */
-    MDCSliderFoundation.prototype.quantize = function (value) {
-        var numSteps = Math.round((value - this.min) / this.step);
-        return this.min + numSteps * this.step;
-    };
-    /**
-     * Updates slider value (internal state and UI) based on the given value.
-     */
-    MDCSliderFoundation.prototype.updateValue = function (value, thumb, _a) {
-        var _b = _a === void 0 ? {} : _a, emitInputEvent = _b.emitInputEvent;
-        value = this.clampValue(value, thumb);
-        if (this.isRange && thumb === Thumb.START) {
-            // Exit early if current value is the same as the new value.
-            if (this.valueStart === value)
-                return;
-            this.valueStart = value;
-        }
-        else {
-            // Exit early if current value is the same as the new value.
-            if (this.value === value)
-                return;
-            this.value = value;
-        }
-        this.updateUI(thumb);
-        if (emitInputEvent) {
-            this.adapter.emitInputEvent(thumb === Thumb.START ? this.valueStart : this.value, thumb);
-        }
-    };
-    /**
-     * Clamps the given value for the given thumb based on slider properties:
-     * - Restricts value within [min, max].
-     * - If range slider, clamp start value <= end value, and
-     *   end value >= start value.
-     */
-    MDCSliderFoundation.prototype.clampValue = function (value, thumb) {
-        // Clamp value to [min, max] range.
-        value = Math.min(Math.max(value, this.min), this.max);
-        var thumbStartMovedPastThumbEnd = this.isRange && thumb === Thumb.START && value > this.value;
-        if (thumbStartMovedPastThumbEnd) {
-            return this.value;
-        }
-        var thumbEndMovedPastThumbStart = this.isRange && thumb === Thumb.END && value < this.valueStart;
-        if (thumbEndMovedPastThumbStart) {
-            return this.valueStart;
-        }
-        return value;
-    };
-    /**
-     * Updates the active track and thumb style properties to reflect current
-     * value.
-     */
-    MDCSliderFoundation.prototype.updateThumbAndTrackUI = function (thumb) {
-        var _this = this;
-        var _a = this, max = _a.max, min = _a.min;
-        var pctComplete = (this.value - this.valueStart) / (max - min);
-        var rangePx = pctComplete * this.rect.width;
-        var isRtl = this.adapter.isRTL();
-        var transformProp = HAS_WINDOW ? util.getCorrectPropertyName(window, 'transform') : 'transform';
-        if (this.isRange) {
-            var thumbLeftPos_1 = this.adapter.isRTL() ?
-                (max - this.value) / (max - min) * this.rect.width :
-                (this.valueStart - min) / (max - min) * this.rect.width;
-            var thumbRightPos_1 = thumbLeftPos_1 + rangePx;
-            this.animFrame.request(AnimationKeys.SLIDER_UPDATE, function () {
-                // Set active track styles, accounting for animation direction by
-                // setting `transform-origin`.
-                var trackAnimatesFromRight = (!isRtl && thumb === Thumb.START) ||
-                    (isRtl && thumb !== Thumb.START);
-                if (trackAnimatesFromRight) {
-                    _this.adapter.setTrackActiveStyleProperty('transform-origin', 'right');
-                    _this.adapter.setTrackActiveStyleProperty('left', 'unset');
-                    _this.adapter.setTrackActiveStyleProperty('right', _this.rect.width - thumbRightPos_1 + "px");
-                }
-                else {
-                    _this.adapter.setTrackActiveStyleProperty('transform-origin', 'left');
-                    _this.adapter.setTrackActiveStyleProperty('right', 'unset');
-                    _this.adapter.setTrackActiveStyleProperty('left', thumbLeftPos_1 + "px");
-                }
-                _this.adapter.setTrackActiveStyleProperty(transformProp, "scaleX(" + pctComplete + ")");
-                // Set thumb styles.
-                var thumbStartPos = isRtl ? thumbRightPos_1 : thumbLeftPos_1;
-                var thumbEndPos = _this.adapter.isRTL() ? thumbLeftPos_1 : thumbRightPos_1;
-                if (thumb === Thumb.START || !thumb || !_this.initialStylesRemoved) {
-                    _this.adapter.setThumbStyleProperty(transformProp, "translateX(" + thumbStartPos + "px)", Thumb.START);
-                }
-                if (thumb === Thumb.END || !thumb || !_this.initialStylesRemoved) {
-                    _this.adapter.setThumbStyleProperty(transformProp, "translateX(" + thumbEndPos + "px)", Thumb.END);
-                }
-                _this.removeInitialStyles(isRtl);
-                _this.updateOverlappingThumbsUI(thumbStartPos, thumbEndPos, thumb);
-            });
-        }
-        else {
-            this.animFrame.request(AnimationKeys.SLIDER_UPDATE, function () {
-                var thumbStartPos = isRtl ? _this.rect.width - rangePx : rangePx;
-                _this.adapter.setThumbStyleProperty(transformProp, "translateX(" + thumbStartPos + "px)", Thumb.END);
-                _this.adapter.setTrackActiveStyleProperty(transformProp, "scaleX(" + pctComplete + ")");
-                _this.removeInitialStyles(isRtl);
-            });
-        }
-    };
-    /**
-     * Removes initial inline styles if not already removed. `left:<...>%`
-     * inline styles can be added to position the thumb correctly before JS
-     * initialization. However, they need to be removed before the JS starts
-     * positioning the thumb. This is because the JS uses
-     * `transform:translateX(<...>)px` (for performance reasons) to position
-     * the thumb (which is not possible for initial styles since we need the
-     * bounding rect measurements).
-     */
-    MDCSliderFoundation.prototype.removeInitialStyles = function (isRtl) {
-        if (this.initialStylesRemoved)
-            return;
-        // Remove thumb position properties that were added for initial render.
-        var position = isRtl ? 'right' : 'left';
-        this.adapter.removeThumbStyleProperty(position, Thumb.END);
-        if (this.isRange) {
-            this.adapter.removeThumbStyleProperty(position, Thumb.START);
-        }
-        this.initialStylesRemoved = true;
-        this.resetTrackAndThumbAnimation();
-    };
-    /**
-     * Resets track/thumb animation to prevent animation when adding
-     * `transform` styles to thumb initially.
-     */
-    MDCSliderFoundation.prototype.resetTrackAndThumbAnimation = function () {
-        var _this = this;
-        if (!this.isDiscrete)
-            return;
-        // Set transition properties to default (no animation), so that the
-        // newly added `transform` styles do not animate thumb/track from
-        // their default positions.
-        var transitionProp = HAS_WINDOW ?
-            util.getCorrectPropertyName(window, 'transition') :
-            'transition';
-        var transitionDefault = 'all 0s ease 0s';
-        this.adapter.setThumbStyleProperty(transitionProp, transitionDefault, Thumb.END);
-        if (this.isRange) {
-            this.adapter.setThumbStyleProperty(transitionProp, transitionDefault, Thumb.START);
-        }
-        this.adapter.setTrackActiveStyleProperty(transitionProp, transitionDefault);
-        // In the next frame, remove the transition inline styles we just
-        // added, such that any animations added in the CSS can now take effect.
-        requestAnimationFrame(function () {
-            _this.adapter.removeThumbStyleProperty(transitionProp, Thumb.END);
-            _this.adapter.removeTrackActiveStyleProperty(transitionProp);
-            if (_this.isRange) {
-                _this.adapter.removeThumbStyleProperty(transitionProp, Thumb.START);
-            }
-        });
-    };
-    /**
-     * Adds THUMB_TOP class to active thumb if thumb knobs overlap; otherwise
-     * removes THUMB_TOP class from both thumbs.
-     * @param thumb Thumb that is active (being moved).
-     */
-    MDCSliderFoundation.prototype.updateOverlappingThumbsUI = function (thumbStartPos, thumbEndPos, thumb) {
-        var thumbsOverlap = false;
-        if (this.adapter.isRTL()) {
-            var startThumbLeftEdge = thumbStartPos - this.startThumbKnobWidth / 2;
-            var endThumbRightEdge = thumbEndPos + this.endThumbKnobWidth / 2;
-            thumbsOverlap = endThumbRightEdge >= startThumbLeftEdge;
-        }
-        else {
-            var startThumbRightEdge = thumbStartPos + this.startThumbKnobWidth / 2;
-            var endThumbLeftEdge = thumbEndPos - this.endThumbKnobWidth / 2;
-            thumbsOverlap = startThumbRightEdge >= endThumbLeftEdge;
-        }
-        if (thumbsOverlap) {
-            this.adapter.addThumbClass(cssClasses.THUMB_TOP, 
-            // If no thumb was dragged (in the case of initial layout), end
-            // thumb is on top by default.
-            thumb || Thumb.END);
-            this.adapter.removeThumbClass(cssClasses.THUMB_TOP, thumb === Thumb.START ? Thumb.END : Thumb.START);
-        }
-        else {
-            this.adapter.removeThumbClass(cssClasses.THUMB_TOP, Thumb.START);
-            this.adapter.removeThumbClass(cssClasses.THUMB_TOP, Thumb.END);
-        }
-    };
-    /**
-     * Converts attribute value to a number, e.g. '100' => 100. Throws errors
-     * for invalid values.
-     * @param attributeValue Attribute value, e.g. 100.
-     * @param attributeName Attribute name, e.g. `aria-valuemax`.
-     */
-    MDCSliderFoundation.prototype.convertAttributeValueToNumber = function (attributeValue, attributeName) {
-        if (attributeValue === null) {
-            throw new Error("MDCSliderFoundation: `" + attributeName + "` must be non-null.");
-        }
-        var value = Number(attributeValue);
-        if (isNaN(value)) {
-            throw new Error("MDCSliderFoundation: `" + attributeName + "` value is " +
-                ("`" + attributeValue + "`, but must be a number."));
-        }
-        return value;
-    };
-    /** Checks that the given properties are valid slider values. */
-    MDCSliderFoundation.prototype.validateProperties = function (_a) {
-        var min = _a.min, max = _a.max, value = _a.value, valueStart = _a.valueStart, step = _a.step;
-        if (min >= max) {
-            throw new Error("MDCSliderFoundation: min must be strictly less than max. " +
-                ("Current: [min: " + min + ", max: " + max + "]"));
-        }
-        if (step <= 0) {
-            throw new Error("MDCSliderFoundation: step must be a positive number. " +
-                ("Current step: " + this.step));
-        }
-        if (this.isRange) {
-            if (value < min || value > max || valueStart < min || valueStart > max) {
-                throw new Error("MDCSliderFoundation: values must be in [min, max] range. " +
-                    ("Current values: [start value: " + valueStart + ", end value: " + value + "]"));
-            }
-            if (valueStart > value) {
-                throw new Error("MDCSliderFoundation: start value must be <= end value. " +
-                    ("Current values: [start value: " + valueStart + ", end value: " + value + "]"));
-            }
-            var numStepsValueStartFromMin = (valueStart - min) / step;
-            var numStepsValueFromMin = (value - min) / step;
-            if ((numStepsValueStartFromMin % 1) !== 0 ||
-                (numStepsValueFromMin % 1) !== 0) {
-                throw new Error("MDCSliderFoundation: Slider values must be valid based on the " +
-                    ("step value. Current values: [start value: " + valueStart + ", ") +
-                    ("end value: " + value + "]"));
-            }
-        }
-        else { // Single point slider.
-            if (value < min || value > max) {
-                throw new Error("MDCSliderFoundation: value must be in [min, max] range. " +
-                    ("Current value: " + value));
-            }
-            var numStepsValueFromMin = (value - min) / step;
-            if ((numStepsValueFromMin % 1) !== 0) {
-                throw new Error("MDCSliderFoundation: Slider value must be valid based on the " +
-                    ("step value. Current value: " + value));
-            }
-        }
-    };
-    MDCSliderFoundation.prototype.registerEventHandlers = function () {
-        this.adapter.registerWindowEventHandler('resize', this.resizeListener);
-        if (MDCSliderFoundation.SUPPORTS_POINTER_EVENTS) {
-            // If supported, use pointer events API with #setPointerCapture.
-            this.adapter.registerEventHandler('pointerdown', this.pointerdownListener);
-            this.adapter.registerEventHandler('pointerup', this.pointerupListener);
-        }
-        else {
-            // Otherwise, fall back to mousedown/touchstart events.
-            this.adapter.registerEventHandler('mousedown', this.mousedownOrTouchstartListener);
-            this.adapter.registerEventHandler('touchstart', this.mousedownOrTouchstartListener);
-        }
-        if (this.isRange) {
-            this.adapter.registerThumbEventHandler(Thumb.START, 'mouseenter', this.thumbMouseenterListener);
-            this.adapter.registerThumbEventHandler(Thumb.START, 'mouseleave', this.thumbMouseleaveListener);
-            this.adapter.registerInputEventHandler(Thumb.START, 'change', this.inputStartChangeListener);
-            this.adapter.registerInputEventHandler(Thumb.START, 'focus', this.inputStartFocusListener);
-            this.adapter.registerInputEventHandler(Thumb.START, 'blur', this.inputStartBlurListener);
-        }
-        this.adapter.registerThumbEventHandler(Thumb.END, 'mouseenter', this.thumbMouseenterListener);
-        this.adapter.registerThumbEventHandler(Thumb.END, 'mouseleave', this.thumbMouseleaveListener);
-        this.adapter.registerInputEventHandler(Thumb.END, 'change', this.inputEndChangeListener);
-        this.adapter.registerInputEventHandler(Thumb.END, 'focus', this.inputEndFocusListener);
-        this.adapter.registerInputEventHandler(Thumb.END, 'blur', this.inputEndBlurListener);
-    };
-    MDCSliderFoundation.prototype.deregisterEventHandlers = function () {
-        this.adapter.deregisterWindowEventHandler('resize', this.resizeListener);
-        if (MDCSliderFoundation.SUPPORTS_POINTER_EVENTS) {
-            this.adapter.deregisterEventHandler('pointerdown', this.pointerdownListener);
-            this.adapter.deregisterEventHandler('pointerup', this.pointerupListener);
-        }
-        else {
-            this.adapter.deregisterEventHandler('mousedown', this.mousedownOrTouchstartListener);
-            this.adapter.deregisterEventHandler('touchstart', this.mousedownOrTouchstartListener);
-        }
-        if (this.isRange) {
-            this.adapter.deregisterThumbEventHandler(Thumb.START, 'mouseenter', this.thumbMouseenterListener);
-            this.adapter.deregisterThumbEventHandler(Thumb.START, 'mouseleave', this.thumbMouseleaveListener);
-            this.adapter.deregisterInputEventHandler(Thumb.START, 'change', this.inputStartChangeListener);
-            this.adapter.deregisterInputEventHandler(Thumb.START, 'focus', this.inputStartFocusListener);
-            this.adapter.deregisterInputEventHandler(Thumb.START, 'blur', this.inputStartBlurListener);
-        }
-        this.adapter.deregisterThumbEventHandler(Thumb.END, 'mouseenter', this.thumbMouseenterListener);
-        this.adapter.deregisterThumbEventHandler(Thumb.END, 'mouseleave', this.thumbMouseleaveListener);
-        this.adapter.deregisterInputEventHandler(Thumb.END, 'change', this.inputEndChangeListener);
-        this.adapter.deregisterInputEventHandler(Thumb.END, 'focus', this.inputEndFocusListener);
-        this.adapter.deregisterInputEventHandler(Thumb.END, 'blur', this.inputEndBlurListener);
-    };
-    MDCSliderFoundation.prototype.handlePointerup = function () {
-        this.handleUp();
-        this.adapter.deregisterEventHandler('pointermove', this.moveListener);
-    };
-    MDCSliderFoundation.SUPPORTS_POINTER_EVENTS = HAS_WINDOW && Boolean(window.PointerEvent) &&
-        // #setPointerCapture is buggy on iOS, so we can't use pointer events
-        // until the following bug is fixed:
-        // https://bugs.webkit.org/show_bug.cgi?id=220196
-        !isIOS();
-    return MDCSliderFoundation;
-}(ponyfill.MDCFoundation));
-function isIOS() {
-    // Source:
-    // https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
-    return [
-        'iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone',
-        'iPod'
-    ].includes(navigator.platform)
-        // iPad on iOS 13 detection
-        || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
-}
-/**
- * Given a number, returns the number of digits that appear after the
- * decimal point.
- * See
- * https://stackoverflow.com/questions/9539513/is-there-a-reliable-way-in-javascript-to-obtain-the-number-of-decimal-places-of
- */
-function getNumDecimalPlaces(n) {
-    // Pull out the fraction and the exponent.
-    var match = /(?:\.(\d+))?(?:[eE]([+\-]?\d+))?$/.exec(String(n));
-    // NaN or Infinity or integer.
-    // We arbitrarily decide that Infinity is integral.
-    if (!match)
-        return 0;
-    var fraction = match[1] || ''; // E.g. 1.234e-2 => 234
-    var exponent = match[2] || 0; // E.g. 1.234e-2 => -2
-    // Count the number of digits in the fraction and subtract the
-    // exponent to simulate moving the decimal point left by exponent places.
-    // 1.234e+2 has 1 fraction digit and '234'.length -  2 == 1
-    // 1.234e-2 has 5 fraction digit and '234'.length - -2 == 5
-    return Math.max(0, // lower limit
-    (fraction === '0' ? 0 : fraction.length) - Number(exponent));
-}
-
-/**
- * @license
- * Copyright 2020 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-/** Vanilla JS implementation of slider component. */
-var MDCSlider = /** @class */ (function (_super) {
-    ponyfill.__extends(MDCSlider, _super);
-    function MDCSlider() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.skipInitialUIUpdate = false;
-        // Function that maps a slider value to the value of the `aria-valuetext`
-        // attribute on the thumb element.
-        _this.valueToAriaValueTextFn = null;
-        return _this;
-    }
-    MDCSlider.attachTo = function (root, options) {
-        if (options === void 0) { options = {}; }
-        return new MDCSlider(root, undefined, options);
-    };
-    MDCSlider.prototype.getDefaultFoundation = function () {
-        var _this = this;
-        // tslint:disable:object-literal-sort-keys Methods should be in the same
-        // order as the adapter interface.
-        var adapter = {
-            hasClass: function (className) { return _this.root.classList.contains(className); },
-            addClass: function (className) {
-                _this.root.classList.add(className);
-            },
-            removeClass: function (className) {
-                _this.root.classList.remove(className);
-            },
-            addThumbClass: function (className, thumb) {
-                _this.getThumbEl(thumb).classList.add(className);
-            },
-            removeThumbClass: function (className, thumb) {
-                _this.getThumbEl(thumb).classList.remove(className);
-            },
-            getAttribute: function (attribute) { return _this.root.getAttribute(attribute); },
-            getInputValue: function (thumb) { return _this.getInput(thumb).value; },
-            setInputValue: function (value, thumb) {
-                _this.getInput(thumb).value = value;
-            },
-            getInputAttribute: function (attribute, thumb) {
-                return _this.getInput(thumb).getAttribute(attribute);
-            },
-            setInputAttribute: function (attribute, value, thumb) {
-                _this.getInput(thumb).setAttribute(attribute, value);
-            },
-            removeInputAttribute: function (attribute, thumb) {
-                _this.getInput(thumb).removeAttribute(attribute);
-            },
-            focusInput: function (thumb) {
-                _this.getInput(thumb).focus();
-            },
-            isInputFocused: function (thumb) {
-                return _this.getInput(thumb) === document.activeElement;
-            },
-            getThumbKnobWidth: function (thumb) {
-                return _this.getThumbEl(thumb)
-                    .querySelector("." + cssClasses.THUMB_KNOB)
-                    .getBoundingClientRect()
-                    .width;
-            },
-            getThumbBoundingClientRect: function (thumb) {
-                return _this.getThumbEl(thumb).getBoundingClientRect();
-            },
-            getBoundingClientRect: function () { return _this.root.getBoundingClientRect(); },
-            isRTL: function () { return getComputedStyle(_this.root).direction === 'rtl'; },
-            setThumbStyleProperty: function (propertyName, value, thumb) {
-                _this.getThumbEl(thumb).style.setProperty(propertyName, value);
-            },
-            removeThumbStyleProperty: function (propertyName, thumb) {
-                _this.getThumbEl(thumb).style.removeProperty(propertyName);
-            },
-            setTrackActiveStyleProperty: function (propertyName, value) {
-                _this.trackActive.style.setProperty(propertyName, value);
-            },
-            removeTrackActiveStyleProperty: function (propertyName) {
-                _this.trackActive.style.removeProperty(propertyName);
-            },
-            setValueIndicatorText: function (value, thumb) {
-                var valueIndicatorEl = _this.getThumbEl(thumb).querySelector("." + cssClasses.VALUE_INDICATOR_TEXT);
-                valueIndicatorEl.textContent = String(value);
-            },
-            getValueToAriaValueTextFn: function () { return _this.valueToAriaValueTextFn; },
-            updateTickMarks: function (tickMarks) {
-                var tickMarksContainer = _this.root.querySelector("." + cssClasses.TICK_MARKS_CONTAINER);
-                if (!tickMarksContainer) {
-                    tickMarksContainer = document.createElement('div');
-                    tickMarksContainer.classList.add(cssClasses.TICK_MARKS_CONTAINER);
-                    var track = _this.root.querySelector("." + cssClasses.TRACK);
-                    track.appendChild(tickMarksContainer);
-                }
-                if (tickMarks.length !== tickMarksContainer.children.length) {
-                    while (tickMarksContainer.firstChild) {
-                        tickMarksContainer.removeChild(tickMarksContainer.firstChild);
-                    }
-                    _this.addTickMarks(tickMarksContainer, tickMarks);
-                }
-                else {
-                    _this.updateTickMarks(tickMarksContainer, tickMarks);
-                }
-            },
-            setPointerCapture: function (pointerId) {
-                _this.root.setPointerCapture(pointerId);
-            },
-            emitChangeEvent: function (value, thumb) {
-                _this.emit(events.CHANGE, { value: value, thumb: thumb });
-            },
-            emitInputEvent: function (value, thumb) {
-                _this.emit(events.INPUT, { value: value, thumb: thumb });
-            },
-            emitDragStartEvent: function (_, thumb) {
-                // Emitting event is not yet implemented. See issue:
-                // https://github.com/material-components/material-components-web/issues/6448
-                _this.getRipple(thumb).activate();
-            },
-            emitDragEndEvent: function (_, thumb) {
-                // Emitting event is not yet implemented. See issue:
-                // https://github.com/material-components/material-components-web/issues/6448
-                _this.getRipple(thumb).deactivate();
-            },
-            registerEventHandler: function (evtType, handler) {
-                _this.listen(evtType, handler);
-            },
-            deregisterEventHandler: function (evtType, handler) {
-                _this.unlisten(evtType, handler);
-            },
-            registerThumbEventHandler: function (thumb, evtType, handler) {
-                _this.getThumbEl(thumb).addEventListener(evtType, handler);
-            },
-            deregisterThumbEventHandler: function (thumb, evtType, handler) {
-                _this.getThumbEl(thumb).removeEventListener(evtType, handler);
-            },
-            registerInputEventHandler: function (thumb, evtType, handler) {
-                _this.getInput(thumb).addEventListener(evtType, handler);
-            },
-            deregisterInputEventHandler: function (thumb, evtType, handler) {
-                _this.getInput(thumb).removeEventListener(evtType, handler);
-            },
-            registerBodyEventHandler: function (evtType, handler) {
-                document.body.addEventListener(evtType, handler);
-            },
-            deregisterBodyEventHandler: function (evtType, handler) {
-                document.body.removeEventListener(evtType, handler);
-            },
-            registerWindowEventHandler: function (evtType, handler) {
-                window.addEventListener(evtType, handler);
-            },
-            deregisterWindowEventHandler: function (evtType, handler) {
-                window.removeEventListener(evtType, handler);
-            },
-            // tslint:enable:object-literal-sort-keys
-        };
-        return new MDCSliderFoundation(adapter);
-    };
-    /**
-     * Initializes component, with the following options:
-     * - `skipInitialUIUpdate`: Whether to skip updating the UI when initially
-     *   syncing with the DOM. This should be enabled when the slider position
-     *   is set before component initialization.
-     */
-    MDCSlider.prototype.initialize = function (_a) {
-        var _b = _a === void 0 ? {} : _a, skipInitialUIUpdate = _b.skipInitialUIUpdate;
-        this.inputs =
-            [].slice.call(this.root.querySelectorAll("." + cssClasses.INPUT));
-        this.thumbs =
-            [].slice.call(this.root.querySelectorAll("." + cssClasses.THUMB));
-        this.trackActive =
-            this.root.querySelector("." + cssClasses.TRACK_ACTIVE);
-        this.ripples = this.createRipples();
-        if (skipInitialUIUpdate) {
-            this.skipInitialUIUpdate = true;
-        }
-    };
-    MDCSlider.prototype.initialSyncWithDOM = function () {
-        this.foundation.layout({ skipUpdateUI: this.skipInitialUIUpdate });
-    };
-    /** Redraws UI based on DOM (e.g. element dimensions, RTL). */
-    MDCSlider.prototype.layout = function () {
-        this.foundation.layout();
-    };
-    MDCSlider.prototype.getValueStart = function () {
-        return this.foundation.getValueStart();
-    };
-    MDCSlider.prototype.setValueStart = function (valueStart) {
-        this.foundation.setValueStart(valueStart);
-    };
-    MDCSlider.prototype.getValue = function () {
-        return this.foundation.getValue();
-    };
-    MDCSlider.prototype.setValue = function (value) {
-        this.foundation.setValue(value);
-    };
-    /** @return Slider disabled state. */
-    MDCSlider.prototype.getDisabled = function () {
-        return this.foundation.getDisabled();
-    };
-    /** Sets slider disabled state. */
-    MDCSlider.prototype.setDisabled = function (disabled) {
-        this.foundation.setDisabled(disabled);
-    };
-    /**
-     * Sets a function that maps the slider value to the value of the
-     * `aria-valuetext` attribute on the thumb element.
-     */
-    MDCSlider.prototype.setValueToAriaValueTextFn = function (mapFn) {
-        this.valueToAriaValueTextFn = mapFn;
-    };
-    MDCSlider.prototype.getThumbEl = function (thumb) {
-        return thumb === Thumb.END ? this.thumbs[this.thumbs.length - 1] :
-            this.thumbs[0];
-    };
-    MDCSlider.prototype.getInput = function (thumb) {
-        return thumb === Thumb.END ? this.inputs[this.inputs.length - 1] :
-            this.inputs[0];
-    };
-    MDCSlider.prototype.getRipple = function (thumb) {
-        return thumb === Thumb.END ? this.ripples[this.ripples.length - 1] :
-            this.ripples[0];
-    };
-    /** Adds tick mark elements to the given container. */
-    MDCSlider.prototype.addTickMarks = function (tickMarkContainer, tickMarks) {
-        var fragment = document.createDocumentFragment();
-        for (var i = 0; i < tickMarks.length; i++) {
-            var div = document.createElement('div');
-            var tickMarkClass = tickMarks[i] === TickMark.ACTIVE ?
-                cssClasses.TICK_MARK_ACTIVE :
-                cssClasses.TICK_MARK_INACTIVE;
-            div.classList.add(tickMarkClass);
-            fragment.appendChild(div);
-        }
-        tickMarkContainer.appendChild(fragment);
-    };
-    /** Updates tick mark elements' classes in the given container. */
-    MDCSlider.prototype.updateTickMarks = function (tickMarkContainer, tickMarks) {
-        var tickMarkEls = Array.from(tickMarkContainer.children);
-        for (var i = 0; i < tickMarkEls.length; i++) {
-            if (tickMarks[i] === TickMark.ACTIVE) {
-                tickMarkEls[i].classList.add(cssClasses.TICK_MARK_ACTIVE);
-                tickMarkEls[i].classList.remove(cssClasses.TICK_MARK_INACTIVE);
-            }
-            else {
-                tickMarkEls[i].classList.add(cssClasses.TICK_MARK_INACTIVE);
-                tickMarkEls[i].classList.remove(cssClasses.TICK_MARK_ACTIVE);
-            }
-        }
-    };
-    /** Initializes thumb ripples. */
-    MDCSlider.prototype.createRipples = function () {
-        var ripples = [];
-        var rippleSurfaces = [].slice.call(this.root.querySelectorAll("." + cssClasses.THUMB));
-        var _loop_1 = function (i) {
-            var rippleSurface = rippleSurfaces[i];
-            // Use the corresponding input as the focus source for the ripple (i.e.
-            // when the input is focused, the ripple is in the focused state).
-            var input = this_1.inputs[i];
-            var adapter = ponyfill.__assign(ponyfill.__assign({}, component.MDCRipple.createAdapter(this_1)), { addClass: function (className) {
-                    rippleSurface.classList.add(className);
-                }, computeBoundingRect: function () { return rippleSurface.getBoundingClientRect(); }, deregisterInteractionHandler: function (evtType, handler) {
-                    input.removeEventListener(evtType, handler);
-                }, isSurfaceActive: function () { return ponyfill.matches(input, ':active'); }, isUnbounded: function () { return true; }, registerInteractionHandler: function (evtType, handler) {
-                    input.addEventListener(evtType, handler, component.applyPassive());
-                }, removeClass: function (className) {
-                    rippleSurface.classList.remove(className);
-                }, updateCssVariable: function (varName, value) {
-                    rippleSurface.style.setProperty(varName, value);
-                } });
-            var ripple = new component.MDCRipple(rippleSurface, new component.MDCRippleFoundation(adapter));
-            ripple.unbounded = true;
-            ripples.push(ripple);
-        };
-        var this_1 = this;
-        for (var i = 0; i < rippleSurfaces.length; i++) {
-            _loop_1(i);
-        }
-        return ripples;
-    };
-    return MDCSlider;
-}(ponyfill.MDCComponent));
 
 /**
  *
@@ -1379,11 +50,12 @@ function getPercentageClass(value) {
     return 'percent-90-100';
 }
 
-const sliderCss = () => `@charset "UTF-8";.mdc-slider__track--active_fill,.mdc-slider__track--inactive,.mdc-slider__thumb-knob{transition:background-color 0.5s ease}:host(.displays-percentage-colors[readonly]){--mdc-theme-on-surface:var(--lime-primary-color)}:host(.displays-percentage-colors.percent-0){--lime-primary-color:var(--color-percent--0)}:host(.displays-percentage-colors.percent-0-10){--lime-primary-color:var(--color-percent--0to10)}:host(.displays-percentage-colors.percent-10-20){--lime-primary-color:var(--color-percent--10to20)}:host(.displays-percentage-colors.percent-20-30){--lime-primary-color:var(--color-percent--20to30)}:host(.displays-percentage-colors.percent-30-40){--lime-primary-color:var(--color-percent--30to40)}:host(.displays-percentage-colors.percent-40-50){--lime-primary-color:var(--color-percent--40to50)}:host(.displays-percentage-colors.percent-50-60){--lime-primary-color:var(--color-percent--50to60)}:host(.displays-percentage-colors.percent-60-70){--lime-primary-color:var(--color-percent--60to70)}:host(.displays-percentage-colors.percent-70-80){--lime-primary-color:var(--color-percent--70to80)}:host(.displays-percentage-colors.percent-80-90){--lime-primary-color:var(--color-percent--80to90)}:host(.displays-percentage-colors.percent-90-100){--lime-primary-color:var(--color-percent--90to100)}:host(.displays-percentage-colors.percent-30-40) .mdc-slider__value-indicator-text,:host(.displays-percentage-colors.percent-40-50) .mdc-slider__value-indicator-text,:host(.displays-percentage-colors.percent-70-80) .mdc-slider__value-indicator-text{color:rgb(var(--color-gray-darker))}:host(.displays-percentage-colors.percent-30-40) .mdc-slider--disabled .mdc-slider__value-indicator-text,:host(.displays-percentage-colors.percent-40-50) .mdc-slider--disabled .mdc-slider__value-indicator-text,:host(.displays-percentage-colors.percent-70-80) .mdc-slider--disabled .mdc-slider__value-indicator-text{color:rgb(var(--contrast-100))}:host(.displays-percentage-colors.percent-50-60) .mdc-slider__value-indicator-text,:host(.displays-percentage-colors.percent-60-70) .mdc-slider__value-indicator-text{color:rgb(var(--color-gray-dark))}:host(.displays-percentage-colors.percent-50-60) .mdc-slider--disabled .mdc-slider__value-indicator-text,:host(.displays-percentage-colors.percent-60-70) .mdc-slider--disabled .mdc-slider__value-indicator-text{color:rgb(var(--contrast-100))}:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled{opacity:1}:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track,:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active,:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive,:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__value-indicator{height:1rem;border-radius:1rem}:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active{top:0}:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__value-indicator{transition:all 0s;transform:translateY(1.75rem)}:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{opacity:0}:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill,:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:before,.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:after{transition:all 0.2s ease 0.2s;content:"";display:block;position:absolute;top:0;bottom:0;margin:auto;opacity:0;width:0;height:0;border:0.25rem solid transparent;border-top-color:rgba(var(--contrast-1400), 0.6)}.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:before{left:-1.25rem;transform:rotate(90deg)}.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:after{right:-1.25rem;transform:rotate(-90deg)}.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:hover:before{opacity:0.8;left:-1.75rem}.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:hover:after{opacity:0.8;right:-1.75rem}.mdc-slider .mdc-slider__thumb{top:-0.25rem}.mdc-slider .mdc-slider__value-indicator-container{z-index:1}.mdc-slider .mdc-slider__value-indicator{transition:transform 0.2s ease-out;opacity:1;transform:scale(1) translateY(2rem);border-radius:1.25rem;padding:0 0.5rem;height:1.5rem}.mdc-slider .mdc-slider__value-indicator:before{border-top-color:transparent}.mdc-slider .mdc-slider__value-indicator-text{color:rgb(var(--color-white))}.mdc-slider .mdc-ripple-upgraded--foreground-activation .mdc-slider__value-indicator{transform:scale(1.5) translateY(0);box-shadow:var(--shadow-depth-16)}.mdc-slider .mdc-ripple-upgraded--foreground-activation .mdc-slider__value-indicator:before{border-top-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__value-indicator{box-shadow:var(--button-shadow-normal)}.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__value-indicator,:host(limel-slider[readonly]) .mdc-slider__value-indicator{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-slider:focus),:host(limel-slider:focus-visible),:host(limel-slider:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-slider){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-slider:focus) limel-helper-line,:host(limel-slider:focus-visible) limel-helper-line,:host(limel-slider:focus-within) limel-helper-line,:host(limel-slider:hover) limel-helper-line{will-change:grid-template-rows}limel-helper-line{order:3}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-slider__thumb{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-slider__thumb::before,.mdc-slider__thumb::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-slider__thumb::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-slider__thumb::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-slider__thumb.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-slider__thumb.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-slider__thumb.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-slider__thumb::before,.mdc-slider__thumb::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-slider__thumb.mdc-ripple-upgraded::before,.mdc-slider__thumb.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-slider__thumb.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-slider__thumb::before,.mdc-slider__thumb::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-slider__thumb:hover::before,.mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-slider .mdc-slider__track{height:4px;position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{border-radius:3px;height:6px;overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right;}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-slider .mdc-slider__track--inactive{border-radius:2px;height:4px;left:0;top:0}.mdc-slider .mdc-slider__track--active_fill{border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:#000;border-color:var(--mdc-theme-on-surface, #000)}.mdc-slider .mdc-slider__track--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee);opacity:0.24}.mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface, #000);opacity:0.24}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;pointer-events:none;position:absolute;transform:translateX(-50%)}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid;bottom:-5px;content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media (prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__value-indicator-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-subtitle2-font-size, 0.875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight, 500);letter-spacing:0.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform, inherit)}.mdc-slider .mdc-slider__value-indicator{background-color:#000;opacity:0.6}.mdc-slider .mdc-slider__value-indicator::before{border-top-color:#000}.mdc-slider .mdc-slider__value-indicator{color:#fff;color:var(--mdc-theme-on-primary, #fff)}.mdc-slider .mdc-slider__thumb{display:flex;height:48px;left:-24px;outline:none;position:absolute;user-select:none;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);border:10px solid;border-radius:50%;box-sizing:border-box;height:20px;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:20px}.mdc-slider .mdc-slider__thumb-knob{background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee);border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:#000;background-color:var(--mdc-theme-on-surface, #000);border-color:#000;border-color:var(--mdc-theme-on-surface, #000)}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider .mdc-slider__thumb::before,.mdc-slider .mdc-slider__thumb::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-slider .mdc-slider__thumb:hover::before,.mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--inactive{border-radius:50%;height:2px;width:2px}.mdc-slider .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary, #fff);opacity:0.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary, #fff);opacity:0.6}.mdc-slider .mdc-slider__tick-mark--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee);opacity:0.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface, #000);opacity:0.6}.mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider.mdc-slider--disabled{opacity:0.38;cursor:auto}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media (prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}:host(limel-slider){isolation:isolate;position:relative;display:flex;flex-direction:column}:host(limel-slider:not([invalid]):not([invalid=true])) .limel-notched-outline,:host(limel-slider[disabled]:not([disabled=false])) .limel-notched-outline{--limel-notched-outline-border-color:transparent;--limel-notched-outline-background-color:transparent}div[slot=content]{display:flex;flex-direction:column;width:100%;padding:0 0.25rem}.mdc-slider{height:2.5rem;margin:0 0.75rem}.mdc-slider .mdc-slider__track--inactive{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.mdc-slider .mdc-slider__track--active_fill{border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.mdc-slider .mdc-slider__thumb-knob{border-color:var(--lime-primary-color, var(--limel-theme-primary-color));background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.mdc-slider .mdc-slider__value-indicator-text{font-size:var(--limel-theme-default-small-font-size)}.mdc-slider .mdc-slider__value-indicator-text{font-family:inherit}.slider__content-range-container{display:flex;order:2;justify-content:space-between;margin:0 auto;margin-top:-0.75rem;width:100%}.slider__content-min-label,.slider__content-max-label{line-height:1;transition:opacity 0.2s ease;opacity:0.7;font-size:0.75rem;color:rgba(var(--contrast-1200), 1)}.mdc-slider__track:before,.mdc-slider__track:after{content:"";display:inline-block;position:absolute;top:0;bottom:0;margin:auto;width:0.375rem;height:0.375rem;border-radius:50%;background-color:rgba(var(--contrast-700), 0.6)}.mdc-slider__track:before{left:-0.75rem}.mdc-slider__track:after{right:-0.75rem}`;
+const sliderCss = () => `@charset "UTF-8";:host([displays-percentage-colors].percent-0){--lime-primary-color:var(--color-percent--0)}:host([displays-percentage-colors].percent-0-10){--lime-primary-color:var(--color-percent--0to10)}:host([displays-percentage-colors].percent-10-20){--lime-primary-color:var(--color-percent--10to20)}:host([displays-percentage-colors].percent-20-30){--lime-primary-color:var(--color-percent--20to30)}:host([displays-percentage-colors].percent-30-40){--lime-primary-color:var(--color-percent--30to40)}:host([displays-percentage-colors].percent-40-50){--lime-primary-color:var(--color-percent--40to50)}:host([displays-percentage-colors].percent-50-60){--lime-primary-color:var(--color-percent--50to60)}:host([displays-percentage-colors].percent-60-70){--lime-primary-color:var(--color-percent--60to70)}:host([displays-percentage-colors].percent-70-80){--lime-primary-color:var(--color-percent--70to80)}:host([displays-percentage-colors].percent-80-90){--lime-primary-color:var(--color-percent--80to90)}:host([displays-percentage-colors].percent-90-100){--lime-primary-color:var(--color-percent--90to100)}:host([displays-percentage-colors].percent-30-40) .indicator,:host([displays-percentage-colors].percent-40-50) .indicator,:host([displays-percentage-colors].percent-70-80) .indicator{color:rgb(var(--color-gray-darker))}:host([displays-percentage-colors].percent-50-60) .indicator,:host([displays-percentage-colors].percent-60-70) .indicator{color:rgb(var(--color-gray-dark))}:host([readonly]:not([readonly=false])) input[type=range]{cursor:default}:host([readonly]:not([readonly=false])) .track,:host([readonly]:not([readonly=false])) .active,:host([readonly]:not([readonly=false])) .indicator{height:0.75rem}:host([readonly]:not([readonly=false])) .indicator{box-shadow:none}:host([readonly]:not([readonly=false])) .knob{opacity:0}:host([readonly]:not([readonly=false])) .active{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.thumb{position:absolute;left:calc(var(--slider-fraction) * 100%);top:0;bottom:0;width:0;z-index:1}.knob{transition:border-color 0.5s ease;position:absolute;top:50%;left:0;transform:translate3d(-50%, -50%, 0);width:1.25rem;height:1.25rem;border-radius:50%;border:0.5rem solid;border-color:var(--lime-primary-color, var(--limel-theme-primary-color));background-color:rgb(var(--contrast-100))}.knob:before,.knob:after{transition:all 0.2s ease 0.2s;content:"";display:block;position:absolute;top:0;bottom:0;margin:auto;width:0;height:0;border:0.375rem solid transparent}:host([disabled]:not([disabled=false])) .knob:before,:host([disabled]:not([disabled=false])) .knob:after{content:none}.knob:before{opacity:calc(var(--slider-fraction) * 100);left:-1rem;transform:rotate(90deg)}.knob:after{opacity:calc((1 - var(--slider-fraction)) * 100);right:-1rem;transform:rotate(-90deg)}.slider:hover .knob,.slider:has(input[type=range]:active) .knob,.slider:has(input[type=range]:focus) .knob{box-shadow:var(--button-shadow-normal)}.slider:hover .knob:before,.slider:has(input[type=range]:active) .knob:before,.slider:has(input[type=range]:focus) .knob:before{left:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.slider:hover .knob:after,.slider:has(input[type=range]:active) .knob:after,.slider:has(input[type=range]:focus) .knob:after{right:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.indicator{user-select:none;position:absolute;left:0;top:50%;z-index:1;transform:translate3d(-50%, -50%, 0);transform-origin:bottom center;transition:transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.5s ease;border-radius:1.25rem;padding:0 0.375rem;height:1.25rem;display:flex;align-items:center;white-space:nowrap;color:rgb(var(--color-white));font-size:0.6875rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color));box-shadow:var(--button-shadow-normal)}:host(:not([disabled]):not([readonly])) input[type=range]:active~.thumb .indicator,:host(:not([disabled]):not([readonly])) input[type=range]:focus~.thumb .indicator{transform:translate3d(-50%, calc(-100% - 0.75rem), 0) scale(1.25);box-shadow:var(--shadow-depth-16)}*,*:before,*:after{box-sizing:border-box;min-width:0;min-height:0}:host(limel-slider){box-sizing:border-box;isolation:isolate;position:relative;display:flex;flex-direction:column}:host(limel-slider:not([invalid]):not([invalid=true])) .limel-notched-outline,:host(limel-slider[disabled]:not([disabled=false])) .limel-notched-outline{--limel-notched-outline-border-color:transparent;--limel-notched-outline-background-color:transparent}div[slot=content]{display:flex;flex-direction:column;width:100%;padding:0 0.25rem}.slider{position:relative;height:2.5rem;margin:0 0.75rem}input[type=range]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;margin:0;appearance:none}:host([disabled]:not([disabled=false])) input[type=range]{cursor:not-allowed}:host([disabled]:not([disabled=false])) .track .active{opacity:0.5}:host([disabled]:not([disabled=false])) .indicator{border-radius:0.125rem;box-shadow:var(--button-shadow-pressed)}.track{transition:background-color 0.5s ease;display:flex;align-items:center;justify-content:space-between;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:0.5rem;border-radius:1rem;background-color:rgba(var(--contrast-700), 0.6)}.track:before,.track:after{content:"";display:inline-block;position:absolute;top:0;bottom:0;margin:auto;width:0.375rem;height:0.375rem;border-radius:50%;background-color:rgba(var(--contrast-700), 0.6)}.track:before{left:-0.75rem}.track:after{right:-0.75rem}.track .active{transition:background-color 0.5s ease;position:absolute;height:100%;width:calc(var(--slider-fraction) * 100%);border-radius:inherit;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.step-dot{transform:translateX(-50%);border-radius:50%;height:0.25rem;width:0.25rem;background-color:rgb(var(--contrast-100), 0.6)}.step-dot:first-of-type,.step-dot:last-of-type{opacity:0}.range-labels{display:flex;justify-content:space-between;margin-top:-0.75rem;width:100%}.range-labels .min,.range-labels .max{line-height:1;font-size:0.75rem;color:var(--limel-notched-outline-label-color, rgb(var(--contrast-1200)))}:host(limel-slider:focus),:host(limel-slider:focus-visible),:host(limel-slider:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-slider){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-slider:focus) limel-helper-line,:host(limel-slider:focus-visible) limel-helper-line,:host(limel-slider:focus-within) limel-helper-line,:host(limel-slider:hover) limel-helper-line{will-change:grid-template-rows}`;
 
 const DEFAULT_FACTOR = 1;
 const DEFAULT_MAX_VALUE = 100;
 const DEFAULT_MIN_VALUE = 0;
+const MAX_VISIBLE_STEP_DOTS = 20;
 const Slider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -1434,24 +106,16 @@ const Slider = class {
          * The minimum value allowed
          */
         this.valuemin = DEFAULT_MIN_VALUE;
-        this.renderRangeContainer = () => {
-            return (index.h("div", { class: "slider__content-range-container" }, index.h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), index.h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)));
-        };
-        this.renderSliderContainer = (inputProps) => {
-            return (index.h("div", { class: {
-                    'mdc-slider': true,
-                    'mdc-slider--discrete': true,
-                    'mdc-slider--disabled': this.disabled || this.readonly,
-                } }, this.renderSliderInput(inputProps), this.renderTrack(), this.renderThumb()));
-        };
-        this.renderSliderInput = (inputProps) => {
-            return (index.h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-labelledby": this.labelId, "aria-describedby": this.helperText ? this.helperTextId : undefined, "aria-controls": this.helperText ? this.helperTextId : undefined }, inputProps)));
-        };
-        this.renderTrack = () => {
-            return (index.h("div", { class: "mdc-slider__track" }, index.h("div", { class: "mdc-slider__track--inactive" }), index.h("div", { class: "mdc-slider__track--active" }, index.h("div", { class: "mdc-slider__track--active_fill" }))));
-        };
-        this.renderThumb = () => {
-            return (index.h("div", { class: "mdc-slider__thumb" }, index.h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" }, index.h("div", { class: "mdc-slider__value-indicator" }, index.h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))), index.h("div", { class: "mdc-slider__thumb-knob" })));
+        this.renderStepDots = (min, max) => {
+            if (!this.step) {
+                return;
+            }
+            const step = this.multiplyByFactor(this.step);
+            const count = Math.floor((max - min) / step) + 1;
+            if (count > MAX_VISIBLE_STEP_DOTS) {
+                return;
+            }
+            return Array.from({ length: count }, () => index.h("span", { class: "step-dot" }));
         };
         this.renderHelperLine = () => {
             if (!this.helperText) {
@@ -1459,97 +123,31 @@ const Slider = class {
             }
             return (index.h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.invalid }));
         };
-        this.initialize = () => {
-            const inputElement = this.getInputElement();
-            if (!inputElement) {
-                return;
-            }
-            const value = this.getValue();
-            /*
-            For some reason the input element's `value` attribute is removed
-            (probably by Stencil) when the element is first rendered. But if the
-            attribute is missing when MDCSlider is initialized (MDC v11.0.0),
-            MDCSlider crashes.
-            So we add the attribute right before initializing MDCSlider. /Ads
-            */
-            inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);
-            /*
-            When creating the `mdcSlider` component, its important that the value set in
-            the input field obeys the range and the step size.
-    
-            The MDCSlider will throw an exception unless the value in the input element
-            is dividible by the step value and is in the provided range.
-            If an exception occurs, this component will crash and it will be impossible to change
-            its value.
-            The logic below ensures that the component will render even though the
-            provided value is wrong.
-            This could be considered wrong, but it at least fixes so that it's possible
-            to change the value from the UI.
-            */
-            const greaterThanOrEqualMin = value >= this.valuemin;
-            const lessThanOrEqualMax = value <= this.valuemax;
-            if (!greaterThanOrEqualMin) {
-                const newMin = this.multiplyByFactor(value);
-                inputElement.setAttribute('min', `${newMin}`);
-            }
-            if (!lessThanOrEqualMax) {
-                const newMax = this.multiplyByFactor(value);
-                inputElement.setAttribute('max', `${newMax}`);
-            }
-            if (this.step) {
-                const step = this.multiplyByFactor(this.step);
-                const scaledValue = this.multiplyByFactor(value);
-                if (!this.isMultipleOfStep(scaledValue, step)) {
-                    const roundedValue = this.roundToStep(scaledValue, step);
-                    inputElement.setAttribute('value', `${roundedValue}`);
-                }
-                inputElement.setAttribute('step', `${step}`);
-            }
-            this.createMDCSlider();
-        };
-        this.reCreateSliderWithStep = () => {
-            const inputElement = this.getInputElement();
-            const step = `${this.multiplyByFactor(this.step)}`;
-            inputElement.setAttribute('step', step);
-            this.destroyMDCSlider();
-            this.createMDCSlider();
-        };
-        this.createMDCSlider = () => {
-            const element = this.getRootElement();
-            this.mdcSlider = new MDCSlider(element);
-            this.mdcSlider.listen('MDCSlider:change', this.changeHandler);
-            this.mdcSlider.listen('MDCSlider:input', this.inputHandler);
-        };
-        this.changeHandler = (event) => {
-            let value = event.detail.value;
+        this.handleInput = (event) => {
+            event.stopPropagation();
+            const input = event.target;
+            const value = Number(input.value);
+            this.displayValue = value;
+            this.setPercentageClass(value / this.factor);
+        };
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            const input = event.target;
+            let value = Number(input.value);
             const step = this.multiplyByFactor(this.step);
             if (!this.isMultipleOfStep(value, step)) {
                 value = this.roundToStep(value, step);
             }
             this.change.emit(value / this.factor);
         };
-        this.inputHandler = (event) => {
-            this.setPercentageClass(event.detail.value / this.factor);
-        };
         this.getContainerClassList = () => {
+            if (!this.percentageClass) {
+                return {};
+            }
             return {
                 [this.percentageClass]: true,
-                'displays-percentage-colors': this.displaysPercentageColors,
-                disabled: this.disabled || this.readonly,
-                readonly: this.readonly,
             };
         };
-        this.resizeObserverCallback = () => {
-            var _a;
-            (_a = this.mdcSlider) === null || _a === void 0 ? void 0 : _a.layout();
-        };
-        this.updateDisabledState = () => {
-            var _a;
-            if (!this.mdcSlider) {
-                return;
-            }
-            (_a = this.mdcSlider) === null || _a === void 0 ? void 0 : _a.setDisabled(this.disabled || this.readonly);
-        };
         this.multiplyByFactor = (value) => {
             return Math.round(value * this.factor);
         };
@@ -1560,6 +158,14 @@ const Slider = class {
             }
             return value;
         };
+        this.getFraction = () => {
+            const min = this.multiplyByFactor(this.valuemin);
+            const max = this.multiplyByFactor(this.valuemax);
+            if (max === min) {
+                return 0;
+            }
+            return Math.max(0, Math.min(1, (this.displayValue - min) / (max - min)));
+        };
         this.setPercentageClass = (value) => {
             this.percentageClass = getPercentageClass((value - this.valuemin) / (this.valuemax - this.valuemin));
         };
@@ -1572,45 +178,17 @@ const Slider = class {
         this.roundToStep = (value, step) => {
             return Math.round(value / step) * step;
         };
-        this.getRootElement = () => {
-            return this.rootElement.shadowRoot.querySelector('.mdc-slider');
-        };
-        this.getInputElement = () => {
-            const element = this.getRootElement();
-            if (!element) {
-                return;
-            }
-            return element.querySelector('input');
-        };
-        this.isStepConfigured = () => {
-            if (!this.step) {
-                return true;
-            }
-            const input = this.getInputElement();
-            if (!input) {
-                return true;
-            }
-            return input.hasAttribute('step');
-        };
         this.labelId = randomString.createRandomString();
         this.helperTextId = randomString.createRandomString();
     }
-    connectedCallback() {
-        this.initialize();
-        this.observer = new ResizeObserver(this.resizeObserverCallback);
-        this.observer.observe(this.rootElement);
-    }
     componentWillLoad() {
-        this.setPercentageClass(this.value);
-    }
-    componentDidLoad() {
-        this.initialize();
-    }
-    disconnectedCallback() {
-        this.destroyMDCSlider();
-        this.observer.disconnect();
+        this.displayValue = this.multiplyByFactor(this.getValue());
+        this.setPercentageClass(this.getValue());
     }
     render() {
+        const min = this.multiplyByFactor(this.valuemin);
+        const max = this.multiplyByFactor(this.valuemax);
+        const fraction = this.getFraction();
         const inputProps = {};
         if (this.step) {
             inputProps.step = this.multiplyByFactor(this.step);
@@ -1618,43 +196,15 @@ const Slider = class {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (index.h(index.Host, { key: '4d8742b0c40d836b9cab61988cafc42e90843e31', class: this.getContainerClassList() }, index.h("limel-notched-outline", { key: 'a775070fe819f15542ad3ba4a2a3839bcf392051', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, index.h("div", { key: 'f01ca4b8c2f71ef4ea7466aff58d821c484e20bc', slot: "content" }, this.renderRangeContainer(), this.renderSliderContainer(inputProps))), this.renderHelperLine()));
-    }
-    watchDisabled() {
-        this.updateDisabledState();
-    }
-    watchReadonly() {
-        this.updateDisabledState();
+        return (index.h(index.Host, { key: 'fa9695563f078bdab1707422cad3aaef2610e592', class: this.getContainerClassList() }, index.h("limel-notched-outline", { key: '8b71ef15e9544a6b346248217c2c2fa8acbba6e7', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, index.h("div", { key: '0327cf7d5295bb1d56e2e34b8dca15cfc3e15c0d', slot: "content" }, index.h("div", { key: '83fade77119ba9fa1d24ae8fdcd54317648918b3', class: "slider", style: { '--slider-fraction': `${fraction}` } }, index.h("input", Object.assign({ key: '5181430787abe75b4556923e31ebe8520df977e9', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
+                ? this.helperTextId
+                : undefined, onInput: this.handleInput, onChange: this.handleChange }, inputProps)), index.h("div", { key: '6ee95d718f1d01e92adcf9592882ed1d32e4ba67', class: "track" }, index.h("div", { key: 'bba420e41501990bdeb1326e59e6eff57000848d', class: "active" }), this.renderStepDots(min, max)), index.h("div", { key: '46e5a45adbda4e1a650d01408c3d228f1c6be68d', class: "thumb" }, index.h("div", { key: 'eeba995f52ff3291e2e7818528b05c7c1dec1b32', class: "knob" }), index.h("div", { key: 'd0321459ed22c6870d939da54df43fe2bfef6333', class: "indicator", "aria-hidden": "true" }, this.displayValue))), index.h("div", { key: 'bcc4449d7605343fd64f4b89b50c8e5d665f6937', class: "range-labels" }, index.h("span", { key: '301c78b1640551fe814ad3b2768bb40f9b682b39', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), index.h("span", { key: '7f8d741f63030b6f8e88231e5215448b815bf3ca', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderHelperLine()));
     }
     watchValue() {
-        if (!this.mdcSlider) {
-            return;
-        }
-        const value = this.multiplyByFactor(this.getValue());
-        this.mdcSlider.setValue(value);
-        if (this.isStepConfigured()) {
-            return;
-        }
-        const step = this.multiplyByFactor(this.step);
-        if (!this.isMultipleOfStep(value, step)) {
-            return;
-        }
-        this.reCreateSliderWithStep();
-    }
-    destroyMDCSlider() {
-        this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);
-        this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);
-        this.mdcSlider.destroy();
-        this.mdcSlider = undefined;
+        this.displayValue = this.multiplyByFactor(this.getValue());
+        this.setPercentageClass(this.getValue());
     }
-    get rootElement() { return index.getElement(this); }
     static get watchers() { return {
-        "disabled": [{
-                "watchDisabled": 0
-            }],
-        "readonly": [{
-                "watchReadonly": 0
-            }],
         "value": [{
                 "watchValue": 0
             }]