npm - @esri/solutions-components - Versions diffs - 0.7.34 → 0.7.35 - Mend

@esri/solutions-components 0.7.34 → 0.7.35

Files changed (1541) hide show

package/dist/components/slider.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as guid } from './guid.js';
 import { i as isPrimaryPointerButton, b as intersects } from './dom.js';
 import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
@@ -18,18 +18,39 @@ import { d as defineCustomElement$1 } from './graph.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  handleLabel: "handle__label",
-  handleLabelMinValue: "handle__label--minValue",
-  handleLabelValue: "handle__label--value",
-  tickMin: "tick__label--min",
-  tickMax: "tick__label--max",
+    container: "container",
+    containerRange: "container--range",
+    graph: "graph",
+    handle: "handle",
+    handleExtension: "handle-extension",
+    handleLabel: "handle__label",
+    handleLabelMinValue: "handle__label--minValue",
+    handleLabelValue: "handle__label--value",
+    hyphen: "hyphen",
+    hyphenWrap: "hyphen--wrap",
+    static: "static",
+    thumb: "thumb",
+    thumbActive: "thumb--active",
+    thumbContainer: "thumb-container",
+    thumbMinValue: "thumb--minValue",
+    thumbPrecise: "thumb--precise",
+    thumbValue: "thumb--value",
+    tick: "tick",
+    tickActive: "tick--active",
+    tickLabel: "tick__label",
+    tickMax: "tick__label--max",
+    tickMin: "tick__label--min",
+    ticks: "ticks",
+    track: "track",
+    trackRange: "track__range",
+    transformed: "transformed",
 };
 const maxTickElementThreshold = 250;
-const sliderCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const sliderCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 function isRange(value) {
     return Array.isArray(value);
@@ -43,6 +64,20 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         this.calciteSliderChange = createEvent(this, "calciteSliderChange", 6);
         this.activeProp = "value";
         this.guid = `calcite-slider-${guid()}`;
+        this.onThumbBlur = () => {
+            this.activeProp = null;
+        };
+        this.onThumbFocus = (event) => {
+            const thumb = event.currentTarget;
+            this.activeProp = thumb.getAttribute("data-value-prop");
+        };
+        this.onThumbPointerDown = (event) => {
+            const thumb = event.currentTarget;
+            this.pointerDownDragStart(event, thumb.getAttribute("data-value-prop"));
+        };
+        this.onTrackPointerDown = (event) => {
+            this.pointerDownDragStart(event, "minMaxValue");
+        };
         this.dragUpdate = (event) => {
             if (this.disabled) {
                 return;
@@ -95,29 +130,28 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
             this.maxValueDragRange = null;
             this.minMaxValueRange = null;
         };
-        /**
-         * Set the reference of the track Element
-         *
-         * @internal
-         * @param node
-         */
         this.storeTrackRef = (node) => {
             this.trackEl = node;
         };
+        this.storeThumbRef = (el) => {
+            if (!el) {
+                return;
+            }
+            const valueProp = el.getAttribute("data-value-prop");
+            valueProp === "minValue" ? (this.minHandle = el) : (this.maxHandle = el);
+        };
         /**
          * Returns a string representing the localized label value based if the groupSeparator prop is parsed.
          *
          * @param value
          */
-        this.determineGroupSeparator = (value) => {
-            if (typeof value === "number") {
-                numberStringFormatter.numberFormatOptions = {
-                    locale: this.effectiveLocale,
-                    numberingSystem: this.numberingSystem,
-                    useGrouping: this.groupSeparator,
-                };
-                return numberStringFormatter.localize(value.toString());
-            }
+        this.formatValue = (value) => {
+            numberStringFormatter.numberFormatOptions = {
+                locale: this.effectiveLocale,
+                numberingSystem: this.numberingSystem,
+                useGrouping: this.groupSeparator,
+            };
+            return numberStringFormatter.localize(value.toString());
         };
         this.disabled = false;
         this.form = undefined;
@@ -209,207 +243,116 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
     }
     render() {
         const id = this.el.id || this.guid;
-        const maxProp = isRange(this.value) ? "maxValue" : "value";
         const value = isRange(this.value) ? this.maxValue : this.value;
-        const displayedValue = this.determineGroupSeparator(value);
-        const displayedMinValue = this.determineGroupSeparator(this.minValue);
         const min = this.minValue || this.min;
         const useMinValue = this.shouldUseMinValue();
         const minInterval = this.getUnitInterval(useMinValue ? this.minValue : min) * 100;
         const maxInterval = this.getUnitInterval(value) * 100;
         const mirror = this.shouldMirror();
-        const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
-        const rightThumbOffset = `${mirror ? maxInterval : 100 - maxInterval}%`;
         const valueIsRange = isRange(this.value);
-        const handleLabelMinValueClasses = `${CSS.handleLabel} ${CSS.handleLabelMinValue}`;
-        const handleLabelValueClasses = `${CSS.handleLabel} ${CSS.handleLabelValue}`;
-        const handle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, h("div", { class: "handle" })));
-        const labeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue), h("div", { class: "handle" })));
-        const histogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
-        const preciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
-        const histogramPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
-        const labeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue), h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
-        const histogramLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
-        const minHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.minHandle = el) }, h("div", { class: "handle" })));
-        const minLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.minHandle = el) }, h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue), h("div", { class: "handle" })));
-        const minHistogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.minHandle = el) }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
-        const minPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.minHandle = el) }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
-        const minLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.minHandle = el) }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
-        return (h(Host, { id: id, onTouchStart: this.handleTouchStart }, h("div", { "aria-label": getLabelText(this), class: {
-                ["container"]: true,
-                ["container--range"]: valueIsRange,
+        const thumbTypes = this.buildThumbType("max");
+        const thumb = this.renderThumb({
+            type: thumbTypes,
+            thumbPlacement: thumbTypes.includes("histogram") ? "below" : "above",
+            maxInterval,
+            minInterval,
+            mirror,
+        });
+        const minThumbTypes = this.buildThumbType("min");
+        const minThumb = valueIsRange &&
+            this.renderThumb({
+                type: minThumbTypes,
+                thumbPlacement: minThumbTypes.includes("histogram") || minThumbTypes.includes("precise")
+                    ? "below"
+                    : "above",
+                maxInterval,
+                minInterval,
+                mirror,
+            });
+        return (h(Host, { id: id, onTouchStart: this.handleTouchStart }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { "aria-label": getLabelText(this), class: {
+                [CSS.container]: true,
+                [CSS.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), h("div", { class: "track",
+            } }, this.renderGraph(), h("div", { class: CSS.track,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeTrackRef }, h("div", { class: "track__range", onPointerDown: (event) => this.pointerDownDragStart(event, "minMaxValue"), style: {
+            ref: this.storeTrackRef }, h("div", { class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: {
                 left: `${mirror ? 100 - maxInterval : minInterval}%`,
                 right: `${mirror ? minInterval : 100 - maxInterval}%`,
-            } }), h("div", { class: "ticks" }, this.tickValues.map((tick) => {
+            } }), h("div", { class: CSS.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
             let activeTicks = tick >= min && tick <= value;
             if (useMinValue) {
                 activeTicks = tick >= this.minValue && tick <= this.maxValue;
             }
             return (h("span", { class: {
-                    tick: true,
-                    "tick--active": activeTicks,
+                    [CSS.tick]: true,
+                    [CSS.tickActive]: activeTicks,
                 }, style: {
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), h("div", { class: "thumb-container" }, !this.precise && !this.labelHandles && valueIsRange && minHandle, !this.hasHistogram &&
-            !this.precise &&
-            this.labelHandles &&
-            valueIsRange &&
-            minLabeledHandle, this.precise && !this.labelHandles && valueIsRange && minPreciseHandle, this.precise && this.labelHandles && valueIsRange && minLabeledPreciseHandle, this.hasHistogram &&
-            !this.precise &&
-            this.labelHandles &&
-            valueIsRange &&
-            minHistogramLabeledHandle, !this.precise && !this.labelHandles && handle, !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle, !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle, this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle, !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle, this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle, this.hasHistogram &&
-            this.precise &&
-            this.labelHandles &&
-            histogramLabeledPreciseHandle, h(HiddenFormInputSlot, { component: this })))));
+        }))), h("div", { class: CSS.thumbContainer }, minThumb, thumb, h(HiddenFormInputSlot, { component: this }))))));
+    }
+    renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
+        const isLabeled = type.includes("labeled");
+        const isPrecise = type.includes("precise");
+        const isMinThumb = type.includes("min");
+        const valueIsRange = isRange(this.value);
+        const value = isMinThumb
+            ? this.minValue
+            : valueIsRange
+                ? this.maxValue
+                : this.value;
+        const valueProp = isMinThumb ? "minValue" : valueIsRange ? "maxValue" : "value";
+        const ariaLabel = isMinThumb ? this.minLabel : valueIsRange ? this.maxLabel : this.minLabel;
+        const ariaValuenow = isMinThumb ? this.minValue : value;
+        const displayedValue = isMinThumb ? this.formatValue(this.minValue) : this.formatValue(value);
+        const thumbStyle = isMinThumb
+            ? { left: `${mirror ? 100 - minInterval : minInterval}%` }
+            : { right: `${mirror ? maxInterval : 100 - maxInterval}%` };
+        const thumbLabelClasses = `${CSS.handleLabel} ${isMinThumb ? CSS.handleLabelMinValue : CSS.handleLabelValue}`;
+        const labels = isLabeled
+            ? [
+                h("span", { "aria-hidden": "true", class: thumbLabelClasses }, displayedValue),
+                h("span", { "aria-hidden": "true", class: `${thumbLabelClasses} ${CSS.static}` }, displayedValue),
+                h("span", { "aria-hidden": "true", class: `${thumbLabelClasses} ${CSS.transformed}` }, displayedValue),
+            ]
+            : [];
+        const thumbContent = [
+            ...labels,
+            h("div", { class: CSS.handle }),
+            isPrecise && h("div", { class: CSS.handleExtension }),
+        ];
+        if (thumbPlacement === "below") {
+            thumbContent.reverse();
+        }
+        return (h("div", { "aria-disabled": this.disabled, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": ariaValuenow, class: {
+                [CSS.thumb]: true,
+                [CSS.thumbValue]: !isMinThumb,
+                [CSS.thumbActive]: this.lastDragProp !== "minMaxValue" && this.dragProp === valueProp,
+                [CSS.thumbPrecise]: isPrecise,
+                [CSS.thumbMinValue]: isMinThumb,
+            }, "data-value-prop": valueProp, key: type, onBlur: this.onThumbBlur, onFocus: this.onThumbFocus, onPointerDown: this.onThumbPointerDown, role: "slider", style: thumbStyle, tabIndex: 0,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.storeThumbRef }, thumbContent));
     }
     renderGraph() {
-        return this.histogram ? (h("calcite-graph", { class: "graph", colorStops: this.histogramStops, data: this.histogram, highlightMax: isRange(this.value) ? this.maxValue : this.value, highlightMin: isRange(this.value) ? this.minValue : this.min, max: this.max, min: this.min })) : null;
+        return this.histogram ? (h("calcite-graph", { class: CSS.graph, colorStops: this.histogramStops, data: this.histogram, highlightMax: isRange(this.value) ? this.maxValue : this.value, highlightMin: isRange(this.value) ? this.minValue : this.min, max: this.max, min: this.min })) : null;
     }
     renderTickLabel(tick) {
-        const valueIsRange = isRange(this.value);
-        const isMinTickLabel = tick === this.min;
-        const isMaxTickLabel = tick === this.max;
-        const displayedTickValue = this.determineGroupSeparator(tick);
-        const tickLabel = (h("span", { class: {
-                tick__label: true,
+        const { hasHistogram, labelHandles, labelTicks, max, min, precise, value } = this;
+        const valueIsRange = isRange(value);
+        const isMinTickLabel = tick === min;
+        const isMaxTickLabel = tick === max;
+        const isAtEdge = isMinTickLabel || isMaxTickLabel;
+        const shouldDisplayLabel = labelTicks &&
+            ((!hasHistogram && (isAtEdge || !precise || !valueIsRange)) ||
+                (hasHistogram && (isAtEdge || (!precise && !labelHandles))));
+        return shouldDisplayLabel ? (h("span", { class: {
+                [CSS.tickLabel]: true,
                 [CSS.tickMin]: isMinTickLabel,
                 [CSS.tickMax]: isMaxTickLabel,
-            } }, displayedTickValue));
-        if (this.labelTicks && !this.hasHistogram && !valueIsRange) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            !this.hasHistogram &&
-            valueIsRange &&
-            !this.precise &&
-            !this.labelHandles) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            !this.hasHistogram &&
-            valueIsRange &&
-            !this.precise &&
-            this.labelHandles) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            !this.hasHistogram &&
-            valueIsRange &&
-            this.precise &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        if (this.labelTicks && this.hasHistogram && !this.precise && !this.labelHandles) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            this.hasHistogram &&
-            this.precise &&
-            !this.labelHandles &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            this.hasHistogram &&
-            !this.precise &&
-            this.labelHandles &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            this.hasHistogram &&
-            this.precise &&
-            this.labelHandles &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        return null;
+            } }, this.formatValue(tick))) : null;
     }
     //--------------------------------------------------------------------------
     //
@@ -478,7 +421,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         }
         this.lastDragPropValue = this[prop];
         this.dragStart(prop);
-        const isThumbActive = this.el.shadowRoot.querySelector(".thumb:active");
+        const isThumbActive = this.el.shadowRoot.querySelector(`.${CSS.thumb}:active`);
         if (!isThumbActive) {
             this.setValue({ [prop]: this.clamp(position, prop) });
         }
@@ -504,6 +447,19 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    buildThumbType(type) {
+        const thumbTypeParts = [type];
+        if (this.labelHandles) {
+            thumbTypeParts.push("labeled");
+        }
+        if (this.precise) {
+            thumbTypeParts.push("precise");
+        }
+        if (this.hasHistogram) {
+            thumbTypeParts.push("histogram");
+        }
+        return thumbTypeParts.join("-");
+    }
     setValueFromMinMax() {
         const { minValue, maxValue } = this;
         if (typeof minValue === "number" && typeof maxValue === "number") {
@@ -715,7 +671,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         const hyphenLabel = leftValueLabel;
         const labelOffset = labelFontSize / 2;
         if (labelTransformedOverlap > 0) {
-            hyphenLabel.classList.add("hyphen", "hyphen--wrap");
+            hyphenLabel.classList.add(CSS.hyphen, CSS.hyphenWrap);
             if (rightValueLabelStaticHostOffset === 0 && leftValueLabelStaticHostOffset === 0) {
                 // Neither handle overlaps the host boundary
                 let leftValueLabelTranslate = labelTransformedOverlap / 2 - labelOffset;
@@ -761,7 +717,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
             }
         }
         else {
-            hyphenLabel.classList.remove("hyphen", "hyphen--wrap");
+            hyphenLabel.classList.remove(CSS.hyphen, CSS.hyphenWrap);
             leftValueLabel.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
             leftValueLabelTransformed.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
             rightValueLabel.style.transform = `translateX(${rightValueLabelStaticHostOffset}px)`;
@@ -791,10 +747,10 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         if (this.hasHistogram && !this.precise && !this.labelHandles) {
             return;
         }
-        const minHandle = this.el.shadowRoot.querySelector(".thumb--minValue");
-        const maxHandle = this.el.shadowRoot.querySelector(".thumb--value");
-        const minTickLabel = this.el.shadowRoot.querySelector(".tick__label--min");
-        const maxTickLabel = this.el.shadowRoot.querySelector(".tick__label--max");
+        const minHandle = this.el.shadowRoot.querySelector(`.${CSS.thumbMinValue}`);
+        const maxHandle = this.el.shadowRoot.querySelector(`.${CSS.thumbValue}`);
+        const minTickLabel = this.el.shadowRoot.querySelector(`.${CSS.tickMin}`);
+        const maxTickLabel = this.el.shadowRoot.querySelector(`.${CSS.tickMax}`);
         if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
             minTickLabel.style.opacity = this.isMinTickLabelObscured(minTickLabel, maxHandle) ? "0" : "1";
             maxTickLabel.style.opacity = this.isMaxTickLabelObscured(maxTickLabel, maxHandle) ? "0" : "1";