@esri/calcite-components 2.2.0-next.11 → 2.2.0-next.13

package/dist/collection/components/slider/slider.js

@@ -1,7 +1,7 @@
 /*!
  * 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.2.0-next.11
+ * v2.2.0-next.13
  */
 import { h, Host, } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -21,6 +21,20 @@ export class Slider {
     constructor() {
         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;
@@ -73,29 +87,28 @@ export class Slider {
             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;
@@ -187,207 +200,116 @@ export class Slider {
     }
     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)));
+        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: {
-                ["container"]: true,
-                ["container--range"]: valueIsRange,
+                [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;
     }
     //--------------------------------------------------------------------------
     //
@@ -456,7 +378,7 @@ export class Slider {
         }
         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) });
         }
@@ -482,6 +404,19 @@ export class Slider {
     //  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") {
@@ -694,7 +629,7 @@ export class Slider {
         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;
@@ -740,7 +675,7 @@ export class Slider {
             }
         }
         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)`;
@@ -770,10 +705,10 @@ export class Slider {
         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";
@@ -1342,7 +1277,7 @@ export class Slider {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires on all updates to the component.\n\n**Note:** Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
+                    "text": "Fires on all updates to the component.\n\nNote: Fires frequently during drag. To perform\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
                 },
                 "complexType": {
                     "original": "void",
@@ -1357,7 +1292,7 @@ export class Slider {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires when the thumb is released on the component.\n\n**Note:** If you need to constantly listen to the drag event,\nuse `calciteSliderInput` instead."
+                    "text": "Fires when the thumb is released on the component.\n\nNote: To constantly listen to the drag event,\nuse `calciteSliderInput` instead."
                 },
                 "complexType": {
                     "original": "void",