@vonage/vivid 5.23.1 → 5.25.0

package/unbundled/definition61.cjs

@@ -1,811 +1,499 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_affix = require("./affix.cjs");
 const require_form_associated = require("./form-associated.cjs");
 const require_localized = require("./localized.cjs");
-const require_definition$1 = require("./definition6.cjs");
-const require_dialog = require("./dialog.cjs");
-const require_definition$2 = require("./definition9.cjs");
-const require_host_semantics = require("./host-semantics.cjs");
-const require_mixins = require("./mixins.cjs");
+const require_definition = require("./definition9.cjs");
+const require_key_codes = require("./key-codes.cjs");
+const require_slider_template = require("./slider.template.cjs");
 const require_form_element = require("./form-element.cjs");
-const require_with_error_text = require("./with-error-text.cjs");
-const require_with_success_text = require("./with-success-text.cjs");
-const require_with_contextual_help = require("./with-contextual-help.cjs");
-const require_definition$3 = require("./definition29.cjs");
-const require_listbox = require("./listbox.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/select/select.scss?inline
-var select_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);--focus-stroke-gap-color:transparent;flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-600);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-select-accent-fierce,var(--vvd-color-neutral-700));border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline);--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:8px;transition:box-shadow .2s,background-color .2s;display:flex}.control.size-condensed{--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control.size-condensed:not(.shape-pill){--_select-control-border-radius:4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius:8px}.control.shape-pill{--_select-control-border-radius:24px}.listbox{max-height:var(--select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:8px}.selected-value{white-space:nowrap;flex-grow:1;align-items:center;column-gap:12px;display:flex;overflow:hidden}.selected-value .text{text-overflow:ellipsis;max-inline-size:100%;overflow:hidden}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width,100%)}:host([multiple]) ::part(popup-base){position:static}@supports selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant,:has(.clear-button:focus)){--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant){--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}:host(:not([multiple]):focus-visible) ::slotted([data-vvd-component=option][current-selected]){box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}:host([multiple]) .clear-button{margin-inline-start:auto}:host([multiple][clearable]) .label-wrapper{min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}";
+//#region src/lib/range-slider/range-slider.scss?inline
+var range_slider_default = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.thumb-container:before{transition:opacity .2s ease-out}}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0}@media (prefers-reduced-motion:no-preference){:host([internal-part]) .thumb-container{transition:opacity .2s}}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}";
 //#endregion
-//#region src/lib/select/select.ts
+//#region src/lib/range-slider/range-slider.ts
+var Direction = {
+	Increment: 1,
+	Decrement: -1
+};
 /**
+* Base class for range-slider
+*
+* @component range-slider
 * @public
-* @component select
-* @slot - Default slot.
-* @slot icon - The preferred way to add an icon to the select control.
-* @slot meta - Slot to add meta content to the select control.
-* @slot helper-text - Describes how to use the select. Alternative to the `helper-text` attribute.
-* @event {CustomEvent<undefined>} input - Fires a custom 'input' event when the value updates
-* @event {CustomEvent<HTMLElement>} change - Fires a custom 'change' event when the value updates
-* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
-* @testAction selectOptionByValue selectOptionByValue
-* @testAction selectOptionByText selectOptionByText
+* @event {CustomEvent<undefined>} input:start - Event emitted when the start value changes
+* @event {CustomEvent<undefined>} input:end - Event emitted when the end value changes
+* @event {CustomEvent<undefined>} input - Event emitted when either the start or end value changes.
+* @event {CustomEvent<undefined>} change - Event emitted when either the start or end value changes.
+* @vueModel start start input:start `event.currentTarget.start`
+* @vueModel end end input:end `event.currentTarget.end`
+* @vueModel startAsNumber startAsNumber input:start `event.currentTarget.startAsNumber`
+* @vueModel endAsNumber endAsNumber input:end `event.currentTarget.endAsNumber`
+* @testSelector byLabel byLabel
+* @testAction slideStartTo slideTo #track #startThumb
+* @testAction slideEndTo slideTo #track #endThumb
+* @testQuery range rangeAsNumber
+* @testRef track shadow .control
+* @testRef startThumb shadow #start-thumb
+* @testRef endThumb shadow #end-thumb
 */
-var Select = class extends require_mixins.WithLightDOMFeedback(require_with_contextual_help.WithContextualHelp(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_localized.Localized(require_form_element.FormElement(require_host_semantics.HostSemantics(require_affix.AffixIconWithTrailing(require_form_associated.FormAssociated(require_listbox.Listbox))))))))) {
+var RangeSlider = class extends require_localized.Localized(require_form_element.FormElement(require_form_associated.FormAssociated(require_vivid_element.VividElement))) {
 	constructor(..._args) {
 		super(..._args);
-		this.proxy = document.createElement("select");
-		this.activeIndex = -1;
-		this.rangeStartIndex = -1;
-		this.open = false;
-		this.listboxId = (0, _microsoft_fast_web_utilities.uniqueId)("listbox-");
-		this.maxHeight = 0;
-		this.fixedDropdown = false;
-		this._feedbackWrapper = null;
-		this._isResetting = false;
-		this.clearable = false;
-		this._isClearButtonFocused = false;
-	}
-	/**
-	* Returns the last checked option.
-	*
-	* @internal
-	*/
-	get activeOption() {
-		return this.options[this.activeIndex];
-	}
-	/**
-	* Returns the list of checked options.
-	*
-	* @internal
-	*/
-	get checkedOptions() {
-		return this.options.filter((o) => o.checked);
-	}
-	/**
-	* Returns the index of the first selected option.
-	*
-	* @internal
-	*/
-	get firstSelectedOptionIndex() {
-		return this.options.indexOf(this.firstSelectedOption);
-	}
-	/**
-	* Updates the `ariaActiveDescendant` property when the active index changes.
-	*
-	* @internal
-	*/
-	activeIndexChanged(_, next) {
-		this._activeDescendant = this.options[next]?.id ?? "";
-		this.focusAndScrollOptionIntoView();
-	}
-	/**
-	* Toggles the checked state for the currently active option.
-	*
-	* @remarks
-	* Multiple-selection mode only.
-	*
-	* @internal
-	*/
-	checkActiveIndex() {
-		const activeItem = this.activeOption;
-		/* v8 ignore else -- @preserve */
-		if (activeItem) activeItem.checked = true;
-	}
-	/**
-	* Sets the active index to the first option and marks it as checked.
-	*
-	* @remarks
-	* Multi-selection mode only.
-	*
-	* @param preserveChecked - mark all options unchecked before changing the active index
-	*
-	* @internal
-	*/
-	checkFirstOption(preserveChecked) {
-		const firstSelectableIndex = this.getNextSelectableIndex(0);
-		if (firstSelectableIndex === -1) return;
-		if (preserveChecked) {
-			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
-			this.options.forEach((o, i) => {
-				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, firstSelectableIndex, this.rangeStartIndex + 1) && !o.disabled;
-			});
-		} else this.uncheckAllOptions();
-		this.activeIndex = firstSelectableIndex;
-		this.checkActiveIndex();
-	}
-	/**
-	* Decrements the active index and sets the matching option as checked.
-	*
-	* @remarks
-	* Multi-selection mode only.
-	*
-	* @param preserveChecked - mark all options unchecked before changing the active index
-	*
-	* @internal
-	*/
-	checkLastOption(preserveChecked) {
-		const lastSelectableIndex = this.getPreviousSelectableIndex(this.length - 1);
-		if (lastSelectableIndex === -1) return;
-		if (preserveChecked) {
-			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
-			this.options.forEach((o, i) => {
-				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, this.rangeStartIndex, lastSelectableIndex + 1) && !o.disabled;
-			});
-		} else this.uncheckAllOptions();
-		this.activeIndex = lastSelectableIndex;
-		this.checkActiveIndex();
-	}
-	/**
-	* Increments the active index and marks the matching option as checked.
-	*
-	* @remarks
-	* Multiple-selection mode only.
-	*
-	* @param preserveChecked - mark all options unchecked before changing the active index
-	*
-	* @internal
-	*/
-	checkNextOption(preserveChecked) {
-		const nextIndex = this.getNextSelectableIndex(this.activeIndex + 1);
-		if (nextIndex === -1) return;
-		if (preserveChecked) {
-			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
-			this.options.forEach((o, i) => {
-				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, this.rangeStartIndex, nextIndex + 1) && !o.disabled;
-			});
-		} else this.uncheckAllOptions();
-		this.activeIndex = nextIndex;
-		this.checkActiveIndex();
-	}
-	/**
-	* Decrements the active index and marks the matching option as checked.
-	*
-	* @remarks
-	* Multiple-selection mode only.
-	*
-	* @param preserveChecked - mark all options unchecked before changing the active index
-	*
-	* @internal
-	*/
-	checkPreviousOption(preserveChecked) {
-		const previousIndex = this.getPreviousSelectableIndex(this.activeIndex - 1);
-		if (previousIndex === -1) return;
-		if (preserveChecked) {
-			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
-			if (this.checkedOptions.length === 1) this.rangeStartIndex += 1;
-			this.options.forEach((o, i) => {
-				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, previousIndex, this.rangeStartIndex + 1) && !o.disabled;
-			});
-		} else this.uncheckAllOptions();
-		this.activeIndex = previousIndex;
-		this.checkActiveIndex();
-	}
+		this.#isInternalValueUpdate = false;
+		this.start = "";
+		this.end = "";
+		this.min = 0;
+		this.max = 10;
+		this.step = 1;
+		this.orientation = _microsoft_fast_web_utilities.Orientation.horizontal;
+		this.ariaStartLabel = null;
+		this.ariaEndLabel = null;
+		this.markers = false;
+		this.pin = false;
+		this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
+		this.proxy = document.createElement("input");
+		this._trackEl = null;
+		this._startThumbEl = null;
+		this._endThumbEl = null;
+		this._draggingThumb = false;
+		this._visiblyFocusedThumb = null;
+		this._hoveredThumb = null;
+		this._startThumbCss = "";
+		this._endThumbCss = "";
+		this._selectedRangeCss = "";
+		this.#isNonVisibleFocus = false;
+		this.#onThumbFocus = (e) => {
+			if (!this.#isNonVisibleFocus) this._visiblyFocusedThumb = this.#getThumbIdFromEvent(e);
+			this.#isNonVisibleFocus = false;
+		};
+		this.#onThumbBlur = () => {
+			this._visiblyFocusedThumb = null;
+		};
+		this.#onVisibilityChange = () => {
+			if (document.hidden && (this.shadowRoot.activeElement === this._startThumbEl || this.shadowRoot.activeElement === this._endThumbEl)) this.#isNonVisibleFocus = true;
+		};
+		this.#onMouseOver = (e) => {
+			this._hoveredThumb = this.#getThumbIdFromEvent(e);
+		};
+		this.#onMouseOut = () => {
+			this._hoveredThumb = null;
+		};
+		this.#onThumbMousedown = (event) => {
+			if (this.disabled || event.defaultPrevented) return;
+			let target = event.target;
+			if (target === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max) target = this._startThumbEl;
+			this.#focusThumbNonVisibly(target);
+			this._draggingThumb = this.#getThumbId(target);
+			this.#registerDragHandlers();
+		};
+		this.#onThumbKeydown = (e) => {
+			const thumb = this.#getThumbIdFromEvent(e);
+			this._visiblyFocusedThumb = thumb;
+			if (e.key === _microsoft_fast_web_utilities.keyHome) {
+				e.preventDefault();
+				this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].min}` });
+			} else if (e.key === _microsoft_fast_web_utilities.keyEnd) {
+				e.preventDefault();
+				this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
+			} else {
+				if (e.shiftKey) return;
+				switch (e.key) {
+					case require_key_codes.keyArrowRight:
+					case _microsoft_fast_web_utilities.keyArrowDown:
+						e.preventDefault();
+						this.#applyStep(thumb, Direction.Increment);
+						break;
+					case require_key_codes.keyArrowLeft:
+					case _microsoft_fast_web_utilities.keyArrowUp:
+						e.preventDefault();
+						this.#applyStep(thumb, Direction.Decrement);
+						break;
+				}
+			}
+		};
+		this.#onDragMove = (e) => {
+			if (this.disabled || e.defaultPrevented || !this._draggingThumb) return;
+			const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
+			const value = this.#calculateValueFromMouseEvent(sourceEvent);
+			this.#updateValues({ [this._draggingThumb]: `${this.#roundToNearestStep(this._draggingThumb, value)}` });
+		};
+		this.#onDragEnd = () => {
+			this._draggingThumb = false;
+			this.#unregisterDragListeners();
+		};
+	}
+	#isInternalValueUpdate;
 	/** @internal */
-	focusAndScrollOptionIntoView() {
-		super.focusAndScrollOptionIntoView(this.activeOption);
-	}
-	/**
-	* In multiple-selection mode:
-	* If any options are selected, the first selected option is checked when
-	* the listbox receives focus. If no options are selected, the first
-	* selectable option is checked.
-	*
-	* @internal
-	*/
-	focusinHandler(e) {
-		if (!this.multiple) {
-			super.focusinHandler(e);
-			return;
-		}
-		/* v8 ignore else -- @preserve */
-		if (!this.shouldSkipFocus && e.target === e.currentTarget) {
-			this.uncheckAllOptions();
-			if (this.activeIndex === -1) this.activeIndex = this.firstSelectedOptionIndex !== -1 ? this.firstSelectedOptionIndex : 0;
-			this.checkActiveIndex();
-			this.setSelectedOptions();
-			this.focusAndScrollOptionIntoView();
+	startChanged() {
+		this.currentStart = this.start;
+		if (!this.#isInternalValueUpdate) {
+			this.dirtyValue = true;
+			this.#updateFormValue();
 		}
-		this.shouldSkipFocus = false;
-	}
-	/** Sets an option as selected and gives it focus. */
-	setSelectedOptions() {
-		if (!this.multiple) {
-			super.setSelectedOptions();
-			return;
-		}
-		/* v8 ignore else -- @preserve */
-		if (this.$fastController.isConnected && this.options) {
-			this.selectedOptions = this.options.filter((o) => o.selected);
-			this.focusAndScrollOptionIntoView();
-		}
-	}
-	/**
-	* Toggles the selected state of the provided options. If any provided items
-	* are in an unselected state, all items are set to selected. If every
-	* provided item is selected, they are all unselected.
-	*
-	* @internal
-	*/
-	toggleSelectedForAllCheckedOptions() {
-		const enabledCheckedOptions = this.checkedOptions.filter((o) => !o.disabled);
-		const force = !enabledCheckedOptions.every((o) => o.selected);
-		enabledCheckedOptions.forEach((o) => o.selected = force);
-		this.selectedIndex = this.options.indexOf(enabledCheckedOptions[enabledCheckedOptions.length - 1]);
-		this.setSelectedOptions();
-		this.updateValue(true);
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
 	/** @internal */
-	typeaheadBufferChanged(prev, next) {
-		if (!this.multiple) {
-			super.typeaheadBufferChanged(prev, next);
-			return;
-		}
-		/* v8 ignore if -- @preserve */
-		if (this.$fastController.isConnected) {
-			const typeaheadMatches = this.getTypeaheadMatches();
-			const activeIndex = this.options.indexOf(typeaheadMatches[0]);
-			if (activeIndex > -1) {
-				this.activeIndex = activeIndex;
-				this.uncheckAllOptions();
-				this.checkActiveIndex();
-			}
-			this.typeaheadExpired = false;
-		}
-	}
-	/**
-	* Unchecks all options.
-	*
-	* @remarks
-	* Multiple-selection mode only.
-	*
-	* @param preserveChecked - reset the rangeStartIndex
-	*
-	* @internal
-	*/
-	uncheckAllOptions(preserveChecked = false) {
-		this.options.forEach((o) => o.checked = false);
-		/* v8 ignore else -- @preserve */
-		if (!preserveChecked) this.rangeStartIndex = -1;
-	}
-	/**
-	* Sets focus when the open property changes.
-	*
-	* @internal
-	*/
-	openChanged(prev, next) {
-		if (!this.collapsible) return;
-		if (this.open) {
-			this.focusAndScrollOptionIntoView();
-			this.indexWhenOpened = this.selectedIndex;
-			_microsoft_fast_element.Updates.enqueue(() => this.focus());
-			return;
+	initialStartChanged(_, newValue) {
+		if (newValue && !this.dirtyValue) {
+			this.start = newValue;
+			this.dirtyValue = false;
 		}
-		const didClose = prev && !next;
-		const selectionChangedWhileOpen = this.indexWhenOpened !== this.selectedIndex;
-		if (didClose && selectionChangedWhileOpen) this.updateValue(true);
-	}
-	/**
-	* The component is collapsible when in single-selection mode.
-	*
-	* @internal
-	*/
-	get collapsible() {
-		return !this.multiple;
 	}
 	/** @internal */
-	valueChanged(prev, next) {
-		const nextSelectedIndex = this.options.findIndex((el) => el.value === next);
-		const validNextSelectedIndex = this._validSelectedIndex(nextSelectedIndex);
-		const nextValue = this.options[validNextSelectedIndex]?.value ?? "";
-		if (this.selectedIndex !== validNextSelectedIndex) this.selectedIndex = validNextSelectedIndex;
-		if (next !== nextValue) return;
-		super.valueChanged(prev, next);
-		this.updateDisplayValue();
-	}
-	/**
-	* Sets the value and display value to match the first selected option.
-	*
-	* @param shouldEmit - if true, the input and change events will be emitted
-	*
-	* @internal
-	*/
-	updateValue(shouldEmit) {
-		if (this.$fastController.isConnected) this.value = this.firstSelectedOption?.value ?? "";
-		if (shouldEmit) {
-			this.$emit("input");
-			this.$emit("change", this, {
-				bubbles: true,
-				composed: void 0
-			});
-		}
+	currentStartChanged() {
+		this.start = this.currentStart;
 	}
-	/**
-	* Updates the proxy value when the selected index changes.
-	*
-	* @param prev - the previous selected index
-	* @param next - the next selected index
-	*
-	* @internal
-	*/
-	selectedIndexChanged(prev, next) {
-		super.selectedIndexChanged(prev, next);
-		this.updateValue();
-	}
-	/**
-	* Handle opening and closing the listbox when the select is clicked.
-	*
-	* @param e - the mouse event
-	* @internal
-	*/
-	clickHandler(e) {
-		if (this.disabled || this._isFromContextualHelp(e)) return;
-		const clickedOption = e.target.closest(`option,[role=option],[data-vvd-component=option]`);
-		if (clickedOption && clickedOption.disabled) return;
-		if (this.multiple) {
-			this.uncheckAllOptions();
-			this.activeIndex = this.options.indexOf(clickedOption);
-			this.checkActiveIndex();
-			this.toggleSelectedForAllCheckedOptions();
-		} else super.clickHandler(e);
-		if (this.collapsible) this.open = !this.open;
-		return true;
-	}
-	/**
-	* Handles focus state when the element or its children lose focus.
-	*
-	* @param e - The focus event
-	* @internal
-	*/
-	focusoutHandler(e) {
-		if (this.multiple) this.uncheckAllOptions();
-		if (!this.open) return true;
-		const focusTarget = e.relatedTarget;
-		if (this.isSameNode(focusTarget)) {
-			this.focus();
-			return;
-		}
-		/* v8 ignore else -- @preserve */
-		if (!this.options.includes(focusTarget)) {
-			this.open = false;
-			if (this.indexWhenOpened !== this.selectedIndex) this.updateValue(true);
-		}
+	/** The start property, typed as a number. */
+	get startAsNumber() {
+		return parseFloat(this.start);
 	}
-	/**
-	* Updates the value when an option's value changes.
-	*
-	* @param source - the source object
-	* @param propertyName - the property to evaluate
-	*
-	* @internal
-	*/
-	handleChange(source, propertyName) {
-		super.handleChange(source, propertyName);
-		if (propertyName === "value") this.updateValue();
-	}
-	/**
-	* Prevents focus when a scrollbar is clicked.
-	*
-	* @param e - the mouse event object
-	*
-	* @internal
-	*/
-	mousedownHandler(e) {
-		if (e.offsetX >= 0 && e.offsetX <= this.listbox.scrollWidth) return super.mousedownHandler(e);
-		return this.collapsible;
+	set startAsNumber(next) {
+		this.start = next.toString();
 	}
 	/** @internal */
-	multipleChanged(_, next) {
-		this.options.forEach((o) => {
-			o.checked = next ? false : void 0;
-		});
-		this.setSelectedOptions();
-		/* v8 ignore if -- @preserve */
-		if (this.proxy) this.proxy.multiple = next;
-	}
-	/**
-	* Updates the selectedness of each option when the list of selected options changes.
-	*
-	* @param prev - the previous list of selected options
-	* @param next - the current list of selected options
-	*
-	* @internal
-	*/
-	selectedOptionsChanged(prev, next) {
-		super.selectedOptionsChanged(prev, next);
-		this.options.forEach((o, i) => {
-			const proxyOption = this.proxy.options.item(i);
-			if (proxyOption) proxyOption.selected = o.selected;
-		});
-	}
-	/**
-	* Resets and fills the proxy to match the component's options.
-	*
-	* @internal
-	*/
-	setProxyOptions() {
-		/* v8 ignore else -- @preserve */
-		if (this.proxy instanceof HTMLSelectElement && this.options) {
-			this.proxy.length = 0;
-			this.options.forEach((option) => {
-				const proxyOption = option.proxy || (option instanceof HTMLOptionElement ? option.cloneNode() : null);
-				if (proxyOption) this.proxy.options.add(proxyOption);
-			});
+	endChanged() {
+		this.currentEnd = this.end;
+		if (!this.#isInternalValueUpdate) {
+			this.dirtyValue = true;
+			this.#updateFormValue();
 		}
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
-	/**
-	* Handles keydown actions when the select is in multiple selection mode.
-	*
-	* @internal
-	*/
-	multipleKeydownHandler(e) {
-		if (this.disabled) return;
-		const { key, shiftKey } = e;
-		this.shouldSkipFocus = false;
-		switch (key) {
-			case _microsoft_fast_web_utilities.keyHome:
-				this.checkFirstOption(shiftKey);
-				return;
-			case _microsoft_fast_web_utilities.keyArrowDown:
-				this.checkNextOption(shiftKey);
-				return;
-			case _microsoft_fast_web_utilities.keyArrowUp:
-				this.checkPreviousOption(shiftKey);
-				return;
-			case _microsoft_fast_web_utilities.keyEnd:
-				this.checkLastOption(shiftKey);
-				return;
-			case _microsoft_fast_web_utilities.keyTab:
-				this.focusAndScrollOptionIntoView();
-				return;
-			case _microsoft_fast_web_utilities.keyEscape:
-				this.uncheckAllOptions();
-				this.checkActiveIndex();
-				return;
-			case _microsoft_fast_web_utilities.keySpace:
-				e.preventDefault();
-				/* v8 ignore else -- @preserve */
-				if (this.typeaheadExpired) {
-					this.toggleSelectedForAllCheckedOptions();
-					return;
-				}
-			default:
-				/* v8 ignore else -- @preserve */
-				if (key.length === 1) this.handleTypeAhead(key);
-				return;
+	/** @internal */
+	initialEndChanged(_, newValue) {
+		if (newValue && !this.dirtyValue) {
+			this.end = newValue;
+			this.dirtyValue = false;
 		}
 	}
-	/**
-	* Handle keyboard interaction for the select.
-	*
-	* @param e - the keyboard event
-	* @internal
-	*/
-	keydownHandler(e) {
-		const selectedIndexBefore = this.selectedIndex;
-		if (this.multiple) this.multipleKeydownHandler(e);
-		else super.keydownHandler(e);
-		switch (e.key) {
-			case _microsoft_fast_web_utilities.keySpace:
-				e.preventDefault();
-				if (this.collapsible && this.typeaheadExpired) this.open = !this.open;
-				break;
-			case _microsoft_fast_web_utilities.keyHome:
-			case _microsoft_fast_web_utilities.keyEnd:
-				e.preventDefault();
-				break;
-			case _microsoft_fast_web_utilities.keyEnter:
-				e.preventDefault();
-				this.open = !this.open;
-				break;
-			case _microsoft_fast_web_utilities.keyEscape:
-				if (this.collapsible && this.open) {
-					e.preventDefault();
-					this.open = false;
-				}
-				break;
-			case _microsoft_fast_web_utilities.keyTab:
-				if (this.collapsible && this.open) {
-					e.preventDefault();
-					this.open = false;
-				}
-				return true;
+	/** @internal */
+	currentEndChanged() {
+		this.end = this.currentEnd;
+	}
+	/** The end property, typed as a number. */
+	get endAsNumber() {
+		return parseFloat(this.end);
+	}
+	set endAsNumber(next) {
+		this.end = next.toString();
+	}
+	#updateValues({ start, end }, emitEvents = true) {
+		if (start === this.start) start = void 0;
+		if (end === this.end) end = void 0;
+		if (start === void 0 && end === void 0) return;
+		this.#isInternalValueUpdate = true;
+		if (start !== void 0) this.start = start;
+		if (end !== void 0) this.end = end;
+		this.#isInternalValueUpdate = false;
+		if (emitEvents) {
+			if (start !== void 0) this.$emit("input:start");
+			if (end !== void 0) this.$emit("input:end");
+			this.$emit("input");
+			this.$emit("change");
+			this.dirtyValue = true;
 		}
-		if (this.collapsible && !this.open && this.selectedIndex !== selectedIndexBefore) this.updateValue(true);
-		return !(e.key === _microsoft_fast_web_utilities.keyArrowDown || e.key === _microsoft_fast_web_utilities.keyArrowUp);
+		this.#updateFormValue();
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener("focusout", this.focusoutHandler);
-		this.addEventListener("contentchange", this.updateDisplayValue);
+	#applyStep(thumb, direction) {
+		this.#updateValues({ [thumb]: this.#roundToNearestStep(thumb, Number(this[thumb]) + direction * this.step).toString() });
 	}
-	disconnectedCallback() {
-		this.removeEventListener("focusout", this.focusoutHandler);
-		this.removeEventListener("contentchange", this.updateDisplayValue);
-		super.disconnectedCallback();
+	/** @internal */
+	orientationChanged() {
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
 	/** @internal */
-	updateDisplayValue() {
-		if (this.collapsible) _microsoft_fast_element.Observable.notify(this, "displayValue");
-	}
-	get displayValue() {
-		_microsoft_fast_element.Observable.track(this, "displayValue");
-		return this.firstSelectedOption?.getAttribute("label") ?? this.firstSelectedOption?.text ?? this.placeholder ?? "";
-	}
-	_newDefaultSelectedIndex(prev, next, currentSelectIndex) {
-		const defaultSelectedIndex = super._newDefaultSelectedIndex(prev, next, currentSelectIndex);
-		if (defaultSelectedIndex === null && currentSelectIndex === -1 && !this.placeholder) {
-			const firstSelectableIndex = this.getNextSelectableIndex(0);
-			if (firstSelectableIndex !== -1) return firstSelectableIndex;
+	nameChanged(previous, next) {
+		super.nameChanged(previous, next);
+		this.#updateFormValue();
+	}
+	#updateFormValue() {
+		if (!this.name) this.setFormValue(null);
+		else {
+			const formData = new FormData();
+			formData.append(this.name, this.start);
+			formData.append(this.name, this.end);
+			this.setFormValue(formData);
 		}
-		return defaultSelectedIndex;
-	}
-	_isDefaultSelected(option) {
-		return super._isDefaultSelected(option) || option.value === this.initialValue || !this._isResetting && option.value === this.value;
 	}
-	slottedOptionsChanged(prev, next) {
-		this.options.forEach((o) => {
-			_microsoft_fast_element.Observable.getNotifier(o).unsubscribe(this, "value");
-		});
-		super.slottedOptionsChanged(prev, next);
-		this.options.forEach((o) => {
-			_microsoft_fast_element.Observable.getNotifier(o).subscribe(this, "value");
+	/** Resets `start` and `end` to their initial values when the form is reset. */
+	formResetCallback() {
+		this.#updateValues({
+			start: this.initialStart ?? this.min.toString(),
+			end: this.initialEnd ?? this.max.toString()
 		});
-		this.setProxyOptions();
-		this.updateValue();
-		const scale = this.getAttribute("scale") || this.scale;
-		next.forEach((element) => {
-			if (scale) {
-				element.setAttribute("scale", scale);
-				element.scale = scale;
+		super.formResetCallback();
+	}
+	get #thumbs() {
+		return {
+			start: this._startThumbEl,
+			end: this._endThumbEl
+		};
+	}
+	get #thumbConstraints() {
+		return {
+			start: {
+				min: this.min,
+				max: this.endAsNumber
+			},
+			end: {
+				min: this.startAsNumber,
+				max: this.max
 			}
-		});
-		this.proxy.value = this.value;
-		this.validate();
-	}
-	formResetCallback() {
-		this.setProxyOptions();
-		this._isResetting = true;
-		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
-		this._isResetting = false;
+		};
+	}
+	#getThumbId(thumb) {
+		return thumb === this._startThumbEl ? "start" : "end";
+	}
+	#getThumbIdFromEvent(e) {
+		return this.#getThumbId(e.target);
+	}
+	#updateThumbPositions() {
+		const startOffsetPct = this.#thumbTrackEndOffset(this.startAsNumber);
+		const endOffsetPct = this.#thumbTrackEndOffset(this.endAsNumber);
+		const [dirProp, dimProp] = this.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? ["right", "width"] : ["bottom", "height"];
+		const transition = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
+		this._startThumbCss = `${dirProp}: ${startOffsetPct}%; ${transition}`;
+		this._endThumbCss = `${dirProp}: ${endOffsetPct}%; ${transition}`;
+		this._selectedRangeCss = `${dirProp}: ${endOffsetPct}%; ${dimProp}: ${startOffsetPct - endOffsetPct}%; ${transition}`;
+	}
+	#thumbTrackEndOffset(value) {
+		return (1 - require_slider_template.inverseLerp(this.min, this.max, value)) * 100;
+	}
+	#calculateValueFromMouseEvent(e) {
+		const trackClientRect = this._trackEl.getBoundingClientRect();
+		const [minPos, maxPos, valuePos] = this.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? [
+			this._trackEl.clientLeft,
+			this._trackEl.clientWidth,
+			e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
+		] : [
+			trackClientRect.top,
+			trackClientRect.bottom,
+			e.pageY - document.documentElement.scrollTop
+		];
+		return require_slider_template.lerp(this.min, this.max, require_slider_template.inverseLerp(minPos, maxPos, valuePos));
+	}
+	#roundToNearestStep(thumb, value) {
+		return (0, _microsoft_fast_web_utilities.limit)(this.#thumbConstraints[thumb].min, this.#thumbConstraints[thumb].max, require_slider_template.roundToStepValue(value - this.min, this.step) + this.min);
+	}
+	#isNonVisibleFocus;
+	#focusThumbNonVisibly(thumb) {
+		this.#isNonVisibleFocus = true;
+		thumb.focus();
+		this.#isNonVisibleFocus = false;
 	}
 	/** @internal */
-	get _shouldShowClearButton() {
-		if (!this.clearable) return false;
-		if (this.multiple) return this.selectedOptions?.length > 0;
-		return this.value !== "";
+	_isThumbPopupOpen(thumb) {
+		return this._visiblyFocusedThumb === thumb || this._hoveredThumb === thumb || this._draggingThumb === thumb;
 	}
-	/** @internal */
-	_onClearButtonFocus() {
-		this._isClearButtonFocused = true;
-		this.activeIndex = -1;
-		this.uncheckAllOptions();
+	connectedCallback() {
+		super.connectedCallback();
+		this.#updateValues({
+			start: this.start || this.initialStart || this.min.toString(),
+			end: this.end || this.initialEnd || this.max.toString()
+		}, false);
+		this.#registerThumbListeners();
+		this.#updateThumbPositions();
+		document.addEventListener("visibilitychange", this.#onVisibilityChange);
 	}
-	/** @internal */
-	_onClearButtonBlur() {
-		this._isClearButtonFocused = false;
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unregisterThumbListeners();
+		this.#unregisterDragListeners();
+		document.removeEventListener("visibilitychange", this.#onVisibilityChange);
+	}
+	#registerThumbListeners() {
+		for (const thumb of ["start", "end"]) {
+			this.#thumbs[thumb].addEventListener("keydown", this.#onThumbKeydown);
+			this.#thumbs[thumb].addEventListener("mousedown", this.#onThumbMousedown, { passive: true });
+			this.#thumbs[thumb].addEventListener("touchstart", this.#onThumbMousedown, { passive: true });
+			this.#thumbs[thumb].addEventListener("mouseover", this.#onMouseOver, { passive: true });
+			this.#thumbs[thumb].addEventListener("mouseout", this.#onMouseOut, { passive: true });
+			this.#thumbs[thumb].addEventListener("focus", this.#onThumbFocus);
+			this.#thumbs[thumb].addEventListener("blur", this.#onThumbBlur);
+		}
 	}
-	/** @internal */
-	get _shouldShowLabelWrapper() {
-		return Boolean(this.label || this._hasContextualHelp || this.multiple && this._shouldShowClearButton);
+	#unregisterThumbListeners() {
+		for (const thumb of ["start", "end"]) {
+			this.#thumbs[thumb].removeEventListener("keydown", this.#onThumbKeydown);
+			this.#thumbs[thumb].removeEventListener("mousedown", this.#onThumbMousedown);
+			this.#thumbs[thumb].removeEventListener("touchstart", this.#onThumbMousedown);
+			this.#thumbs[thumb].removeEventListener("mouseover", this.#onMouseOver);
+			this.#thumbs[thumb].removeEventListener("mouseout", this.#onMouseOut);
+			this.#thumbs[thumb].removeEventListener("focus", this.#onThumbFocus);
+			this.#thumbs[thumb].removeEventListener("blur", this.#onThumbBlur);
+		}
 	}
 	/** @internal */
-	_onClearButtonClick() {
-		if (this.multiple) this.selectedOptions.forEach((o) => {
-			/* v8 ignore else -- @preserve */
-			if (!o.disabled) o.selected = false;
-		});
-		else this.selectedIndex = -1;
-		this.updateValue(true);
-	}
+	_onMouseDown(e) {
+		if (this.disabled || this._draggingThumb) return;
+		const value = this.#calculateValueFromMouseEvent(e);
+		const startDistance = Math.abs(value - Number(this.start));
+		const endDistance = Math.abs(value - Number(this.end));
+		const thumb = startDistance < endDistance || startDistance === endDistance && value < Number(this.start) ? "start" : "end";
+		this.#updateValues({ [thumb]: `${this.#roundToNearestStep(thumb, value)}` });
+		this._draggingThumb = thumb;
+		this.#focusThumbNonVisibly(this.#thumbs[thumb]);
+		this.#registerDragHandlers();
+	}
+	#onThumbFocus;
+	#onThumbBlur;
+	#onVisibilityChange;
+	#onMouseOver;
+	#onMouseOut;
+	#onThumbMousedown;
+	#onThumbKeydown;
+	#registerDragHandlers() {
+		window.addEventListener("mousemove", this.#onDragMove, { passive: true });
+		window.addEventListener("touchmove", this.#onDragMove, { passive: true });
+		window.addEventListener("mouseup", this.#onDragEnd);
+		window.addEventListener("touchend", this.#onDragEnd);
+		window.document.addEventListener("mouseleave", this.#onDragEnd);
+	}
+	#unregisterDragListeners() {
+		window.removeEventListener("mouseup", this.#onDragEnd);
+		window.document.removeEventListener("mouseleave", this.#onDragEnd);
+		window.removeEventListener("mousemove", this.#onDragMove);
+		window.removeEventListener("touchmove", this.#onDragMove);
+		window.removeEventListener("touchend", this.#onDragEnd);
+	}
+	#onDragMove;
+	#onDragEnd;
 };
-require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "activeIndex", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Select.prototype, "multiple", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "start", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "open",
-	mode: "boolean"
-})], Select.prototype, "open", void 0);
-require_decorate.__decorate([_microsoft_fast_element.volatile], Select.prototype, "collapsible", null);
-require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "control", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "maxHeight", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_anchor", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Select.prototype, "scale", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Select.prototype, "appearance", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Select.prototype, "shape", void 0);
+	mode: "fromView",
+	attribute: "start"
+})], RangeSlider.prototype, "initialStart", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "current-start" })], RangeSlider.prototype, "currentStart", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "end", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	mode: "boolean",
-	attribute: "fixed-dropdown"
-})], Select.prototype, "fixedDropdown", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Select.prototype, "placeholder", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_feedbackWrapper", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "metaSlottedContent", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Select.prototype, "clearable", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_isClearButtonFocused", void 0);
+	mode: "fromView",
+	attribute: "end"
+})], RangeSlider.prototype, "initialEnd", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "current-end" })], RangeSlider.prototype, "currentEnd", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], RangeSlider.prototype, "min", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], RangeSlider.prototype, "max", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: require_slider_template.defaultToOneConverter })], RangeSlider.prototype, "step", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], RangeSlider.prototype, "orientation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "aria-start-label" })], RangeSlider.prototype, "ariaStartLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "aria-end-label" })], RangeSlider.prototype, "ariaEndLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], RangeSlider.prototype, "markers", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], RangeSlider.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], RangeSlider.prototype, "pin", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "valueTextFormatter", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_draggingThumb", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_visiblyFocusedThumb", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_hoveredThumb", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_startThumbCss", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_endThumbCss", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_selectedRangeCss", void 0);
 //#endregion
-//#region src/lib/select/select.template.ts
-function renderLabel() {
-	return _microsoft_fast_element.html` <label
-		for="${(x) => x.multiple ? null : "control"}"
-		class="label"
-		id="label"
+//#region src/lib/range-slider/range-slider.template.ts
+var getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => (0, _microsoft_fast_web_utilities.classNames)("thumb-container", ["focus-visible", _visiblyFocusedThumb === thumb]);
+var RangeSliderTemplate = (context) => {
+	const popupTag = context.tagFor(require_definition.Popup);
+	return _microsoft_fast_element.html` <template
+		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
 	>
-		${(x) => x.label}
-	</label>`;
-}
-function renderPlaceholder(context) {
-	const optionTag = context.tagFor(require_definition$3.ListboxOption);
-	return _microsoft_fast_element.html`
-		<${optionTag} text="${(x) => x.placeholder}" hidden disabled>
-		</${optionTag}>`;
-}
-function renderClearButton(context) {
-	const buttonTag = context.tagFor(require_definition$1.Button);
-	return _microsoft_fast_element.html`
-		<${buttonTag}
-			aria-label="${(x) => x.locale.select.clearButtonLabel}"
-			aria-hidden="${(x) => x._isClearButtonFocused ? "false" : "true"}"
-			@click="${(x, c) => {
-		x._onClearButtonClick();
-		c.event.stopPropagation();
-	}}"
-			@mousedown="${() => false}"
-			@keydown="${(x, c) => {
-		/* v8 ignore next -- @preserve */
-		if (c.event.key === "Tab") x._onClearButtonBlur();
-		c.event.stopPropagation();
-		return true;
-	}}"
-			@focusin="${(x, c) => {
-		c.event.stopPropagation();
-		x._onClearButtonFocus();
-	}}"
-			@focusout="${(x) => x._onClearButtonBlur()}"
-			?disabled="${(x) => x.disabled}"
-			:shape="${(x) => x.shape}"
-			size="super-condensed"
-			icon="close-line"
-			appearance="ghost-light"
-			class="clear-button"
-			tabindex="0"
-		></${buttonTag}>
-	`;
-}
-function selectValue(context) {
-	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
-	const chevronTemplate = require_definition$1.chevronTemplateFactory(context);
-	return _microsoft_fast_element.html` <div
-		class="control ${(x) => (0, _microsoft_fast_web_utilities.classNames)(["has-activedescendant", Boolean(x._activeDescendant) && x.open], ["disabled", x.disabled], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["has-meta", Boolean(x.metaSlottedContent?.length)], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText], ["shows-placeholder", Boolean(x.placeholder) && !x.value], [`size-${x.scale}`, Boolean(x.scale)])}"
-		${(0, _microsoft_fast_element.ref)("_anchor")}
-		id="control"
-		?disabled="${(x) => x.disabled}"
-	>
-		<div class="selected-value">
-			${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
-			<span class="text">${(x) => x.displayValue}</span>
-			<slot name="meta" ${(0, _microsoft_fast_element.slotted)("metaSlottedContent")}></slot>
-		</div>
-		${(0, _microsoft_fast_element.when)((x) => x._shouldShowClearButton, renderClearButton(context))}
-		${chevronTemplate}
-	</div>`;
-}
-function setFixedDropdownVarWidth(x) {
-	return x.open && x.fixedDropdown ? `--_select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
-}
-/** @param context - element definition context */
-function renderControl(context) {
-	const popupTag = context.tagFor(require_definition$2.Popup);
-	return _microsoft_fast_element.html`
-			<div class="label-wrapper" ?hidden=${(x) => !x._shouldShowLabelWrapper}>
-				${(0, _microsoft_fast_element.when)((x) => x.label, renderLabel())}
-				${(0, _microsoft_fast_element.when)((x) => x.multiple && x._shouldShowClearButton, renderClearButton(context))}
-				<slot name="contextual-help" ${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}></slot>
-			</div>
-			<div class="control-wrapper">
-				${(0, _microsoft_fast_element.when)((x) => !x.multiple, selectValue(context))}
-				<${popupTag} class="popup"
-					style="${setFixedDropdownVarWidth}"
-					?open="${(x) => x.collapsible ? x.open : true}"
-					:anchor="${(x) => x._anchor}"
-					placement="bottom-start"
-					strategy="${(x) => x.fixedDropdown ? null : "absolute"}">
-					<div class="listbox"
-						id="${(x) => x.listboxId}"
-						role="listbox"
-						aria-multiselectable="${(x) => x.multiple}"
-						aria-label="${(x) => x.multiple && !x.label && x.ariaLabel ? x.ariaLabel : null}"
-						aria-labelledby="${(x) => x.multiple && x.label ? "label" : null}"
-						?disabled="${(x) => x.disabled}"
-						?hidden="${(x) => x.collapsible ? !x.open : false}"
-						${(0, _microsoft_fast_element.ref)("listbox")}>
-						${(0, _microsoft_fast_element.when)((x) => x.placeholder, renderPlaceholder(context))}
-						<slot
-							${(0, _microsoft_fast_element.slotted)({
-		filter: require_listbox.Listbox.slottedOptionFilter,
-		flatten: true,
-		property: "slottedOptions"
-	})}>
-						</slot>
-				 	</div>
-				</${popupTag}>
-			</div>
-		`;
-}
-/** Ignore events that originate from feedback, e.g. a click on link */
-function ifNotFromFeedback(handler) {
-	return (x, c) => {
-		if (!c.event.composedPath().includes(x._feedbackWrapper)) {
-			handler(x, c.event);
-			return;
-		}
-		return true;
-	};
-}
-var SelectTemplate = (context) => {
-	return _microsoft_fast_element.html`
-		<template
-			${require_host_semantics.applyHostSemantics({
-		role: "combobox",
-		ariaLabel: (x) => x.ariaLabel ?? x.label,
-		ariaHasPopup: (x) => x.collapsible ? "listbox" : "false",
-		ariaExpanded: (x) => x.open,
-		ariaDisabled: (x) => x.disabled
-	})}
-			aria-controls="${(x) => x.listboxId}"
-			aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
-			aria-describedby="${(x) => x._feedbackDescribedBy}"
-			tabindex="${(x) => !x.disabled ? "0" : null}"
-			@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"
-			@focusin="${ifNotFromFeedback((x, e) => x.focusinHandler(e))}"
-			@focusout="${ifNotFromFeedback((x, e) => x.focusoutHandler(e))}"
-			@keydown="${ifNotFromFeedback((x, e) => {
-		if (x.open) require_dialog.handleEscapeKeyAndStopPropogation(e);
-		return x.keydownHandler(e);
-	})}"
-			@mousedown="${ifNotFromFeedback((x, e) => x.mousedownHandler(e))}"
+		<div
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["disabled", x.disabled], [`connotation-${x.connotation}`, Boolean(x.connotation)])} ${(x) => x.orientation}"
 		>
-			${renderControl(context)}
-			<div class="feedback-wrapper" ${(0, _microsoft_fast_element.ref)("_feedbackWrapper")}>
-				${(x) => x._getFeedbackTemplate(context)}
+			<div class="positioning-region">
+				<div ${(0, _microsoft_fast_element.ref)("_trackEl")} class="track">
+					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
+					${(0, _microsoft_fast_element.when)((x) => x.markers, _microsoft_fast_element.html`${(x) => require_slider_template.getMarkersTemplate(x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal, Math.floor((x.max - x.min) / x.step))}`)}
+				</div>
+				<div
+					id="start-thumb"
+					${(0, _microsoft_fast_element.ref)("_startThumbEl")}
+					class="${getThumbClassesFor("start")}"
+					style="${(x) => x._startThumbCss}"
+					role="slider"
+					tabindex="${(x) => x.disabled ? null : 0}"
+					aria-label="${(x) => x.ariaStartLabel || x.locale.rangeSlider.startThumbLabel}"
+					aria-valuetext="${(x) => x.valueTextFormatter(x.start)}"
+					aria-valuenow="${(x) => x.start}"
+					aria-valuemin="${(x) => x.min}"
+					aria-valuemax="${(x) => x.end}"
+					aria-disabled="${(x) => x.disabled}"
+					aria-orientation="${(x) => x.orientation}"
+				></div>
+				${(0, _microsoft_fast_element.when)((x) => x.pin, _microsoft_fast_element.html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x._startThumbEl}"
+					:open=${(x) => x._isThumbPopupOpen("start")}
+					:placementStrategy=${(x) => x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? require_definition.PlacementStrategy.AutoPlacementHorizontal : require_definition.PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${(x) => x.valueTextFormatter(x.start)}</div>
+				</${popupTag}>`)}
+				<div
+					id="end-thumb"
+					${(0, _microsoft_fast_element.ref)("_endThumbEl")}
+					class="${getThumbClassesFor("end")}"
+					style="${(x) => x._endThumbCss}"
+					role="slider"
+					tabindex="${(x) => x.disabled ? null : 0}"
+					aria-label="${(x) => x.ariaEndLabel || x.locale.rangeSlider.endThumbLabel}"
+					aria-valuetext="${(x) => x.valueTextFormatter(x.end)}"
+					aria-valuenow="${(x) => x.end}"
+					aria-valuemin="${(x) => x.start}"
+					aria-valuemax="${(x) => x.max}"
+					aria-disabled="${(x) => x.disabled}"
+					aria-orientation="${(x) => x.orientation}"
+				></div>
+				${(0, _microsoft_fast_element.when)((x) => x.pin, _microsoft_fast_element.html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x._endThumbEl}"
+					:open=${(x) => x._isThumbPopupOpen("end")}
+					:placementStrategy=${(x) => x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? require_definition.PlacementStrategy.AutoPlacementHorizontal : require_definition.PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${(x) => x.valueTextFormatter(x.end)}</div>
+				</${popupTag}>`)}
 			</div>
-		</template>
-	`;
+		</div>
+	</template>`;
 };
 //#endregion
-//#region src/lib/select/definition.ts
+//#region src/lib/range-slider/definition.ts
 /** @internal */
-var selectDefinition = require_vivid_element.defineVividComponent("select", Select, SelectTemplate, [
-	require_definition$2.popupDefinition,
-	require_definition.iconDefinition,
-	require_definition$3.listboxOptionDefinition,
-	require_definition$1.buttonDefinition,
-	require_mixins.feedbackMessageDefinition
-], { styles: select_default });
+var rangeSliderDefinition = require_vivid_element.defineVividComponent("range-slider", RangeSlider, RangeSliderTemplate, [require_definition.popupDefinition], {
+	styles: range_slider_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the select elements with the design system.
+* Registers the range-slider element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSelect = require_vivid_element.createRegisterFunction(selectDefinition);
+var registerRangeSlider = require_vivid_element.createRegisterFunction(rangeSliderDefinition);
 //#endregion
-Object.defineProperty(exports, "Select", {
+Object.defineProperty(exports, "RangeSlider", {
 	enumerable: true,
 	get: function() {
-		return Select;
+		return RangeSlider;
 	}
 });
-Object.defineProperty(exports, "registerSelect", {
+Object.defineProperty(exports, "rangeSliderDefinition", {
 	enumerable: true,
 	get: function() {
-		return registerSelect;
+		return rangeSliderDefinition;
 	}
 });
-Object.defineProperty(exports, "selectDefinition", {
+Object.defineProperty(exports, "registerRangeSlider", {
 	enumerable: true,
 	get: function() {
-		return selectDefinition;
+		return registerRangeSlider;
 	}
 });