@momentum-design/components 0.110.1 → 0.111.0

package/dist/components/slider/slider.component.js

@@ -7,183 +7,582 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import { property, queryAll, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { Component } from '../../models';
+import { KEYS } from '../../utils/keys';
+import { DEFAULTS } from './slider.constants';
 import styles from './slider.styles';
 /**
- * slider component, which ...
+ * Slider component is used to select a value or range of values from within a defined range.
+ * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.
+ * It can be used as a single slider or a range slider. This is set by the boolean attribute `range`
+ * If the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.
  *
  * @tagname mdc-slider
  *
- * @slot default - This is a default/unnamed slot
+ * @dependency mdc-icon
  *
- * @cssproperty --custom-property-name - Description of the CSS custom property
+ * @csspart slider-tooltip - The tooltip of the slider
+ * @csspart slider-track - The track of the slider
+ * @csspart slider-wrapper - The wrapper around the slider input(s)
+ * @csspart slider-ticks - The container for the tick marks
+ * @csspart slider-tick - The individual tick marks
+ * @csspart slider-input - The input element of the slider
+ * @csspart slider-label - The label of the slider
+ *
+ * @event input - Fired when the slider value changes
+ * @event change - Fired when the slider value is committed
+ *
+ * @cssproperty --mdc-slider-thumb-color - The color of the slider thumb
+ * @cssproperty --mdc-slider-thumb-border-color - The color of the slider thumb border
+ * @cssproperty --mdc-slider-thumb-size - The size of the slider thumb
+ * @cssproperty --mdc-slider-input-size - The height of the slider input
+ * @cssproperty --mdc-slider-tick-size - The size of the slider tick marks
+ * @cssproperty --mdc-slider-track-height - The height of the slider track
+ * @cssproperty --mdc-slider-tick-color - The color of the slider tick marks
+ * @cssproperty --mdc-slider-progress-color - The color of the slider progress
+ * @cssproperty --mdc-slider-track-color - The color of the slider track
+ * @cssproperty --mdc-slider-tooltip-left - The left position of the slider tooltip
+ * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks
  */
 class Slider extends Component {
     constructor() {
-        super(...arguments);
-        /**
-         * Whether or not to show a value range. When false, the slider displays a slide-able handle for the value property; when true, it displays slide-able handles for the valueStart and valueEnd properties.
-         */
-        this.range = false;
-        /**
-         * The slider minimum value.
-         */
-        this.min = 0;
-        /**
-         * The slider maximum value.
-         */
-        this.max = 100;
-        /**
-         * The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.
-         */
-        this.step = 1;
-        /**
-         * An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.
-         */
-        this.valueLabel = '';
-        /**
-         * An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.
-         */
-        this.valueLabelStart = '';
+        super();
         /**
-         * An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.
+         * Internal state to track if the slider thumb is focused (single value)
+         * @internal
          */
-        this.valueLabelEnd = '';
+        this.thumbFocused = DEFAULTS.STATE;
         /**
-         * Aria label for the slider's start handle displayed when range is true.
+         * @internal
          */
-        this.ariaLabelStart = '';
+        this.thumbHovered = DEFAULTS.STATE;
         /**
-         * Aria value text for the slider's start value displayed when range is true.
+         * Indicates whether it is a range slider. When true, the slider displays two handles for selecting a range of values.
+         * When false, the slider displays a single handle for selecting a single value.
+         * @default false
          */
-        this.ariaValuetextStart = '';
-        /**
-         * Aria label for the slider's end handle displayed when range is true.
-         */
-        this.ariaLabelEnd = '';
+        this.range = false;
         /**
-         * Aria value text for the slider's end value displayed when range is true.
+         * The slider minimum value.
+         * @default 0
          */
-        this.ariaValuetextEnd = '';
+        this.min = DEFAULTS.MIN;
         /**
-         * Aria value text for the slider's value displayed when range is false.
+         * The slider maximum value.
+         * @default 100
          */
-        this.dataAriaValuetext = '';
+        this.max = DEFAULTS.MAX;
         /**
-         * Aria label for the slider's handle displayed when range is false.
+         * The step between values. If defined and greater than 1, we will show tick marks and the stepper will snap to the nearest tick mark.
+         * @default 1
          */
-        this.dataAriaLabel = '';
+        this.step = DEFAULTS.STEP;
+        this.addEventListener('keydown', this.preventChange.bind(this));
+        this.addEventListener('mousedown', this.preventChange.bind(this));
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value') ||
+            changedProperties.has('step') ||
+            changedProperties.has('min') ||
+            changedProperties.has('max') ||
+            changedProperties.has('disabled') ||
+            changedProperties.has('softDisabled') ||
+            changedProperties.has('range') ||
+            changedProperties.has('valueStart') ||
+            changedProperties.has('valueEnd')) {
+            this.updateTrackStyling();
+        }
+        if (changedProperties.has('softDisabled')) {
+            this.setSoftDisabled();
+        }
+        if (changedProperties.has('range') || changedProperties.has('valueStart') || changedProperties.has('valueEnd')) {
+            this.initializeRangeSlider();
+        }
+    }
+    /**
+     * Prevents default behavior for mouse and keyboard events.
+     * This prevents user interaction with the slider when it is soft-disabled.
+     * @param e - The event to prevent.
+     */
+    preventChange(e) {
+        if (this.softDisabled && ((e instanceof KeyboardEvent && e.key !== KEYS.TAB) || !(e instanceof KeyboardEvent))) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    /**
+     * Sets the soft-disabled state for the slider.
+     * Applies the appropriate ARIA attributes.
+     */
+    setSoftDisabled() {
+        this.inputElements.forEach(input => {
+            const inputElement = input;
+            if (this.softDisabled) {
+                inputElement.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                inputElement.removeAttribute('aria-disabled');
+            }
+        });
+    }
+    /**
+     * Initializes the range slider by setting default values for the start and end handles.
+     * Updates the slider's input elements to reflect the current values.
+     */
+    initializeRangeSlider() {
+        if (this.valueStart === undefined) {
+            this.valueStart = this.min;
+        }
+        if (this.valueEnd === undefined) {
+            this.valueEnd = this.max;
+        }
+        this.handleInput(0);
+        this.handleInput(1);
+    }
+    /**
+     * Handles input changes for either the start or end thumb of the range slider.
+     * Ensures thumbs do not cross over each other.
+     * @param thumbIndex - 0 for start thumb, 1 for end thumb.
+     */
+    handleInput(thumbIndex) {
+        const input = this.inputElements[thumbIndex];
+        if (!input)
+            return;
+        if (thumbIndex === 0) {
+            if (!this.valueEnd)
+                return; // Ensure valueEnd is available
+            const inputValue = Number(input.value);
+            if (inputValue > this.valueEnd) {
+                input.value = String(this.valueEnd);
+                this.valueStart = this.valueEnd;
+            }
+            else if (inputValue >= this.min && inputValue < this.valueEnd) {
+                this.valueStart = inputValue;
+            }
+            else if (inputValue < this.min) {
+                // Handle case where input goes below min
+                input.value = String(this.min);
+                this.valueStart = this.min;
+            }
+        }
+        else {
+            // Handling the end thumb
+            if (!this.valueStart)
+                return; // Ensure valueStart is available
+            const inputValue = Number(input.value);
+            if (inputValue < this.valueStart) {
+                input.value = String(this.valueStart);
+                this.valueEnd = this.valueStart;
+            }
+            else if (inputValue <= this.max && inputValue > this.valueStart) {
+                this.valueEnd = inputValue;
+            }
+            else if (inputValue > this.max) {
+                // Handle case where input goes above max
+                input.value = String(this.max);
+                this.valueEnd = this.max;
+            }
+        }
+    }
+    /**
+     * Renders an icon element.
+     * @param icon - The name of the icon to render.
+     * @param part - The part attribute for the icon element.
+     * @returns The icon element or null.
+     */
+    iconTemplate(icon, part) {
+        return typeof icon === 'string' && icon.length > 0
+            ? html `<mdc-icon
+          name="${icon}"
+          part="${part}"
+          length-unit="${DEFAULTS.ICON_LENGTH_UNIT}"
+          size="${DEFAULTS.ICON_SIZE}"
+        ></mdc-icon>`
+            : null;
+    }
+    /**
+     * Renders a visual representation of tooltip element and places it exactly above the slider thumb.
+     * @param label - The label to display in the tooltip.
+     * @param source - The source of the tooltip (e.g., 'start' or 'end').
+     * @returns The tooltip element.
+     */
+    tooltipTemplate(label, source) {
+        const [inputStart, inputEnd] = this.inputElements;
+        const input = source === 'end' ? inputEnd : inputStart;
+        const value = Number(input === null || input === void 0 ? void 0 : input.value);
+        if (typeof value !== 'number' || Number.isNaN(value) || this.max === this.min) {
+            return nothing;
+        }
+        const normalizedValue = (value - this.min) / (this.max - this.min);
+        return html `<div part="slider-tooltip" aria-hidden="true" style="--mdc-slider-tooltip-left: ${normalizedValue}">
+      ${label || value}
+    </div> `;
+    }
+    /**
+     * Updates the styling of the slider track.
+     * The progress value is calculated and updated using appropriate tokens
+     * In a range slider, both thumbs are considered.
+     * The track is filled between the two thumbs.
+     */
+    updateTrackStyling() {
+        let progressColor = `var(--mdc-slider-progress-color)`;
+        let trackColor = `var(--mdc-slider-track-color)`;
+        if (this.disabled || this.softDisabled) {
+            progressColor = `var(--mds-color-theme-control-active-disabled)`;
+            trackColor = `var(--mds-color-theme-control-inactive-disabled)`;
+        }
+        if (this.range) {
+            if (!this.inputElements[1])
+                return;
+            const valueStart = Number(this.inputElements[0].value);
+            const valueEnd = Number(this.inputElements[1].value);
+            const max = Number(this.inputElements[0].max) || 1;
+            const progressStart = Math.max(0, Math.min(100, ((valueStart - this.min) / (max - this.min)) * 100));
+            const progressEnd = Math.max(0, Math.min(100, ((valueEnd - this.min) / (max - this.min)) * 100));
+            this.inputElements[1].style.background = `linear-gradient(
+        to right,
+        ${trackColor} 0%,
+        ${trackColor} ${progressStart}%,
+        ${progressColor} ${progressStart}%,
+        ${progressColor} ${progressEnd}%,
+        ${trackColor} ${progressEnd}%,
+        ${trackColor} 100%
+      )`;
+        }
+        else {
+            if (!this.inputElements[0])
+                return;
+            const value = Number(this.inputElements[0].value);
+            const max = Number(this.inputElements[0].max) || 1;
+            const progress = Math.max(0, Math.min(100, ((value - this.min) / (max - this.min)) * 100));
+            this.inputElements[0].style.background = `linear-gradient(to right, ${progressColor} ${progress}%, ${trackColor} ${progress}%)`;
+        }
+    }
+    /**
+     * Handles the input event for the single value slider.
+     * @param e - The input event.
+     */
+    onInput(e) {
+        const input = e.target;
+        this.value = Number(input.value);
+    }
+    /**
+     * Handles the change event for the single value slider.
+     * @param e - The change event.
+     */
+    onChange(e) {
+        const input = e.target;
+        this.value = Number(input.value);
+        this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value } }));
+    }
+    /**
+     * Handles the change event for the start thumb of the range slider.
+     * @param e - The change event.
+     */
+    onChangeStart(e) {
+        const input = e.target;
+        this.valueStart = Number(input.value);
+        this.dispatchEvent(new CustomEvent('change', { detail: { valueStart: this.valueStart, valueEnd: this.valueEnd } }));
+    }
+    /**
+     * Handles the change event for the end thumb of the range slider.
+     * @param e - The change event.
+     */
+    onChangeEnd(e) {
+        const input = e.target;
+        this.valueEnd = Number(input.value);
+        this.dispatchEvent(new CustomEvent('change', { detail: { valueEnd: this.valueEnd, valueStart: this.valueStart } }));
+    }
+    /**
+     * Get the styles for the tick marks.
+     * Since the ticks are placed above the slider, we need to hide the tick that is placed exactly where the slider thumb is.
+     * Based on this condition, it renders the styles appropriately.
+     * @param tick - The tick value.
+     * @returns The styles for the tick mark.
+     */
+    getTickStyles(tick) {
+        if (this.max === this.min)
+            return '';
+        const normalizedTick = (tick - this.min) / (this.max - this.min);
+        const normalizedValues = [];
+        if (this.inputElements[0]) {
+            const value = Number(this.inputElements[0].value);
+            const normalizedValue = (value - this.min) / (this.max - this.min);
+            normalizedValues.push(normalizedValue);
+        }
+        if (this.range && this.inputElements[1]) {
+            const valueEnd = Number(this.inputElements[1].value);
+            const normalizedValueEnd = (valueEnd - this.min) / (this.max - this.min);
+            normalizedValues.push(normalizedValueEnd);
+        }
+        // Hide tick if it is at the same pixel as any thumb (allowing for 1px tolerance)
+        if (normalizedValues.includes(normalizedTick)) {
+            return 'display:none;';
+        }
+        return `--mdc-slider-tick-left:${normalizedTick};`;
+    }
+    renderTicks() {
+        // Tick marks
+        const ticks = [];
+        if (this.step && this.step > 1) {
+            for (let i = this.min; i <= this.max; i += this.step) {
+                ticks.push(i);
+            }
+        }
+        if (this.step > 1) {
+            return html ` <div part="slider-ticks">
+        ${repeat(ticks, tick => tick, tick => html `<span part="slider-tick" style=${this.getTickStyles(tick)}></span>`)}
+      </div>`;
+        }
+        return nothing;
     }
     render() {
-        return html `<p>This is a dummy slider component!</p>
-      <slot></slot>`;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        return html `
+      ${this.label ? html `<label part="slider-label" for="single-slider">${this.label}</label>` : null}
+      <div part="slider-track">
+        ${this.iconTemplate(this.leadingIcon, 'leading-icon')}
+        <div part="slider-wrapper">
+          ${this.renderTicks()}
+          ${this.range
+            ? html `
+                <input
+                  id="start-slider"
+                  part="start-slider"
+                  type="range"
+                  min="${this.min}"
+                  max="${this.max}"
+                  step="${(_a = this.step) !== null && _a !== void 0 ? _a : 1}"
+                  .value="${String((_b = this.valueStart) !== null && _b !== void 0 ? _b : this.min)}"
+                  ?disabled="${this.disabled}"
+                  name="${(_c = this.nameStart) !== null && _c !== void 0 ? _c : ''}"
+                  aria-valuemin="${this.min}"
+                  aria-valuemax="${this.max}"
+                  aria-valuenow="${(_d = this.valueStart) !== null && _d !== void 0 ? _d : this.min}"
+                  aria-label="${this.startAriaLabel || this.label || ''}"
+                  aria-valuetext="${this.startAriaValuetext || this.valueLabelStart || this.valueStart || ''}"
+                  tabindex="${this.disabled ? -1 : 0}"
+                  @input=${() => this.handleInput(0)}
+                  @change=${this.onChangeStart}
+                  @focus=${() => {
+                this.thumbFocused = 'start';
+            }}
+                  @blur=${() => {
+                this.thumbFocused = undefined;
+            }}
+                  @mouseenter=${() => {
+                if (!this.disabled)
+                    this.thumbHovered = 'start';
+            }}
+                  @mouseleave=${() => {
+                this.thumbHovered = undefined;
+            }}
+                />
+                ${this.thumbFocused === 'start' || this.thumbHovered === 'start'
+                ? this.tooltipTemplate(this.valueLabelStart)
+                : nothing}
+                <input
+                  id="end-slider"
+                  part="end-slider"
+                  type="range"
+                  min="${this.min}"
+                  max="${this.max}"
+                  step="${(_e = this.step) !== null && _e !== void 0 ? _e : 1}"
+                  .value="${String((_f = this.valueEnd) !== null && _f !== void 0 ? _f : this.max)}"
+                  ?disabled="${this.disabled}"
+                  name="${(_g = this.nameEnd) !== null && _g !== void 0 ? _g : ''}"
+                  aria-valuemin="${this.min}"
+                  aria-valuemax="${this.max}"
+                  aria-valuenow="${(_h = this.valueEnd) !== null && _h !== void 0 ? _h : this.max}"
+                  aria-label="${this.endAriaLabel || this.label || ''}"
+                  aria-valuetext="${this.endAriaValueText || this.valueLabelEnd || this.valueEnd || ''}"
+                  tabindex="${this.disabled ? -1 : 0}"
+                  @input=${() => this.handleInput(1)}
+                  @change=${this.onChangeEnd}
+                  @focus=${() => {
+                this.thumbFocused = 'end';
+            }}
+                  @blur=${() => {
+                this.thumbFocused = undefined;
+            }}
+                  @mouseenter=${() => {
+                if (!this.disabled)
+                    this.thumbHovered = 'end';
+            }}
+                  @mouseleave=${() => {
+                this.thumbHovered = undefined;
+            }}
+                />
+                ${this.thumbFocused === 'end' || this.thumbHovered === 'end'
+                ? this.tooltipTemplate(this.valueLabelEnd, this.thumbFocused || this.thumbHovered)
+                : nothing}
+              `
+            : html `
+                <input
+                  id="single-slider"
+                  part="single-slider"
+                  type="range"
+                  min="${this.min}"
+                  max="${this.max}"
+                  step="${(_j = this.step) !== null && _j !== void 0 ? _j : 1}"
+                  .value="${String((_k = this.value) !== null && _k !== void 0 ? _k : this.min)}"
+                  ?disabled="${this.disabled}"
+                  name="${(_l = this.name) !== null && _l !== void 0 ? _l : ''}"
+                  aria-valuemin="${this.min}"
+                  aria-valuemax="${this.max}"
+                  aria-valuenow="${(_m = this.value) !== null && _m !== void 0 ? _m : this.min}"
+                  aria-label="${(_p = (_o = this.dataAriaLabel) !== null && _o !== void 0 ? _o : this.label) !== null && _p !== void 0 ? _p : ''}"
+                  aria-valuetext="${(_r = (_q = this.dataAriaValuetext) !== null && _q !== void 0 ? _q : this.valueLabel) !== null && _r !== void 0 ? _r : String((_s = this.value) !== null && _s !== void 0 ? _s : '')}"
+                  tabindex="${this.disabled ? -1 : 0}"
+                  @input=${this.onInput}
+                  @change=${this.onChange}
+                  @focus=${() => {
+                this.thumbFocused = 'start';
+            }}
+                  @blur=${() => {
+                this.thumbFocused = undefined;
+            }}
+                  @mouseenter=${() => {
+                if (!this.disabled)
+                    this.thumbHovered = 'start';
+            }}
+                  @mouseleave=${() => {
+                this.thumbHovered = undefined;
+            }}
+                />
+                ${this.thumbFocused === 'start' || this.thumbHovered === 'start'
+                ? this.tooltipTemplate(this.valueLabel)
+                : nothing}
+              `}
+        </div>
+        ${this.iconTemplate(this.trailingIcon, 'trailing-icon')}
+      </div>
+      <div part="slider-labels">
+        ${this.labelStart ? html `<span part="slider-label-start">${this.labelStart}</span>` : null}
+        ${this.labelEnd ? html `<span part="slider-label-end">${this.labelEnd}</span>` : null}
+      </div>
+    `;
     }
 }
 Slider.styles = [...Component.styles, ...styles];
 __decorate([
-    property({ type: Boolean }),
+    state(),
+    __metadata("design:type", Object)
+], Slider.prototype, "thumbFocused", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Slider.prototype, "thumbHovered", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean }),
     __metadata("design:type", Object)
 ], Slider.prototype, "range", void 0);
 __decorate([
-    property({ type: Boolean }),
+    property({ reflect: true, type: Number }),
+    __metadata("design:type", Number)
+], Slider.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true, type: Number }),
+    __metadata("design:type", Number)
+], Slider.prototype, "max", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean }),
     __metadata("design:type", Boolean)
 ], Slider.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'soft-disabled' }),
+    property({ reflect: true, type: Boolean, attribute: 'soft-disabled' }),
     __metadata("design:type", Boolean)
 ], Slider.prototype, "softDisabled", void 0);
 __decorate([
-    property({ type: String, attribute: 'leading-icon' }),
+    property({ reflect: true, type: String, attribute: 'leading-icon' }),
     __metadata("design:type", String)
 ], Slider.prototype, "leadingIcon", void 0);
 __decorate([
-    property({ type: String, attribute: 'trailing-icon' }),
+    property({ reflect: true, type: String, attribute: 'trailing-icon' }),
     __metadata("design:type", String)
 ], Slider.prototype, "trailingIcon", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], Slider.prototype, "min", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], Slider.prototype, "max", void 0);
-__decorate([
-    property({ type: Number }),
+    property({ reflect: true, type: Number }),
     __metadata("design:type", Number)
 ], Slider.prototype, "value", void 0);
 __decorate([
-    property({ type: Number, attribute: 'value-start' }),
+    property({ reflect: true, type: Number, attribute: 'value-start' }),
     __metadata("design:type", Number)
 ], Slider.prototype, "valueStart", void 0);
 __decorate([
-    property({ type: Number, attribute: 'value-end' }),
+    property({ reflect: true, type: Number, attribute: 'value-end' }),
     __metadata("design:type", Number)
 ], Slider.prototype, "valueEnd", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
+    property({ reflect: true, type: Number }),
+    __metadata("design:type", Number)
 ], Slider.prototype, "step", void 0);
 __decorate([
-    property({ type: String }),
+    property({ reflect: true, type: String }),
     __metadata("design:type", String)
 ], Slider.prototype, "label", void 0);
 __decorate([
-    property({ type: String, attribute: 'label-start' }),
+    property({ reflect: true, type: String, attribute: 'label-start' }),
     __metadata("design:type", String)
 ], Slider.prototype, "labelStart", void 0);
 __decorate([
-    property({ type: String, attribute: 'label-end' }),
+    property({ reflect: true, type: String, attribute: 'label-end' }),
     __metadata("design:type", String)
 ], Slider.prototype, "labelEnd", void 0);
 __decorate([
-    property({ type: String, attribute: 'value-label' }),
+    property({ reflect: true, type: String, attribute: 'value-label' }),
     __metadata("design:type", String)
 ], Slider.prototype, "valueLabel", void 0);
 __decorate([
-    property({ type: String, attribute: 'value-label-start' }),
+    property({ reflect: true, type: String, attribute: 'value-label-start' }),
     __metadata("design:type", String)
 ], Slider.prototype, "valueLabelStart", void 0);
 __decorate([
-    property({ type: String, attribute: 'value-label-end' }),
+    property({ reflect: true, type: String, attribute: 'value-label-end' }),
     __metadata("design:type", String)
 ], Slider.prototype, "valueLabelEnd", void 0);
 __decorate([
-    property({ type: String, attribute: 'aria-label-start' }),
+    property({ reflect: true, type: String }),
     __metadata("design:type", String)
-], Slider.prototype, "ariaLabelStart", void 0);
+], Slider.prototype, "name", void 0);
 __decorate([
-    property({ type: String, attribute: 'aria-valuetext-start' }),
+    property({ reflect: true, type: String, attribute: 'name-start' }),
     __metadata("design:type", String)
-], Slider.prototype, "ariaValuetextStart", void 0);
+], Slider.prototype, "nameStart", void 0);
 __decorate([
-    property({ type: String, attribute: 'aria-label-end' }),
+    property({ reflect: true, type: String, attribute: 'name-end' }),
     __metadata("design:type", String)
-], Slider.prototype, "ariaLabelEnd", void 0);
+], Slider.prototype, "nameEnd", void 0);
 __decorate([
-    property({ type: String, attribute: 'aria-valuetext-end' }),
+    property({ reflect: true, type: String, attribute: 'data-aria-label' }),
     __metadata("design:type", String)
-], Slider.prototype, "ariaValuetextEnd", void 0);
+], Slider.prototype, "dataAriaLabel", void 0);
 __decorate([
-    property({ type: String }),
+    property({ reflect: true, type: String, attribute: 'start-aria-label' }),
     __metadata("design:type", String)
-], Slider.prototype, "name", void 0);
+], Slider.prototype, "startAriaLabel", void 0);
 __decorate([
-    property({ type: String, attribute: 'name-start' }),
+    property({ reflect: true, type: String, attribute: 'end-aria-label' }),
     __metadata("design:type", String)
-], Slider.prototype, "nameStart", void 0);
+], Slider.prototype, "endAriaLabel", void 0);
 __decorate([
-    property({ type: String, attribute: 'name-end' }),
+    property({ reflect: true, type: String, attribute: 'data-aria-valuetext' }),
     __metadata("design:type", String)
-], Slider.prototype, "nameEnd", void 0);
+], Slider.prototype, "dataAriaValuetext", void 0);
 __decorate([
-    property({ type: String, attribute: 'data-aria-valuetext' }),
+    property({ reflect: true, type: String, attribute: 'start-aria-valuetext' }),
     __metadata("design:type", String)
-], Slider.prototype, "dataAriaValuetext", void 0);
+], Slider.prototype, "startAriaValuetext", void 0);
 __decorate([
-    property({ type: String, attribute: 'data-aria-label' }),
+    property({ reflect: true, type: String, attribute: 'end-aria-valuetext' }),
     __metadata("design:type", String)
-], Slider.prototype, "dataAriaLabel", void 0);
+], Slider.prototype, "endAriaValueText", void 0);
+__decorate([
+    queryAll('input[type="range"]'),
+    __metadata("design:type", Array)
+], Slider.prototype, "inputElements", void 0);
 export default Slider;