@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.597

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

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.597
  */
-import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { intersects } from "../../utils/dom";
 import { clamp, decimalPlaces } from "../../utils/math";
@@ -11,8 +11,7 @@ import { connectLabel, disconnectLabel } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
-import { localizeNumberString } from "../../utils/locale";
-import { watchGlobalAttributes, unwatchGlobalAttributes } from "../../utils/globalAttributes";
+import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
 import { CSS } from "./resources";
 function isRange(value) {
   return Array.isArray(value);
@@ -49,7 +48,7 @@ export class Slider {
     /** When true, sets a finer point for handles. */
     this.precise = false;
     /**
-     * When true, the component must have a value on form submission.
+     * When true, the component must have a value in order for the form to submit.
      */
     this.required = false;
     /** When true, enables snap selection in coordination with "step" via a mouse. */
@@ -63,12 +62,12 @@ export class Slider {
      */
     this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
+    this.effectiveLocale = "";
     this.activeProp = "value";
     this.minMaxValueRange = null;
     this.minValueDragRange = null;
     this.maxValueDragRange = null;
     this.tickValues = [];
-    this.globalAttributes = {};
     this.dragUpdate = (event) => {
       event.preventDefault();
       if (this.dragProp) {
@@ -122,9 +121,13 @@ export class Slider {
      * @param value
      */
     this.determineGroupSeparator = (value) => {
-      const lang = this.globalAttributes["lang"] || document.documentElement.lang || "en";
       if (typeof value === "number") {
-        return localizeNumberString(value.toString(), lang, this.groupSeparator, this.numberingSystem);
+        numberStringFormatter.setOptions({
+          locale: this.effectiveLocale,
+          numberingSystem: this.numberingSystem,
+          useGrouping: this.groupSeparator
+        });
+        return numberStringFormatter.localize(value.toString());
       }
     };
   }
@@ -143,17 +146,17 @@ export class Slider {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectLocalized(this);
     this.setMinMaxFromValue();
     this.setValueFromMinMax();
     connectLabel(this);
     connectForm(this);
-    watchGlobalAttributes(this, ["lang"]);
   }
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
+    disconnectLocalized(this);
     this.removeDragListeners();
-    unwatchGlobalAttributes(this);
   }
   componentWillLoad() {
     this.tickValues = this.generateTickValues();
@@ -201,158 +204,100 @@ export class Slider {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
-      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
-      h("div", { class: "handle" })));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
-      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" })));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
-      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)));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
-      h("div", { class: "handle" }),
-      h("div", { class: "handle-extension" })));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
-      h("div", { class: "handle-extension" }),
-      h("div", { class: "handle" })));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
-      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" })));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
-      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)));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
-      h("div", { class: "handle" })));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
-      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" })));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
-      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)));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
-      h("div", { class: "handle-extension" }),
-      h("div", { class: "handle" })));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, 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: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
-      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", { class: {
-          ["container"]: true,
-          ["container--range"]: valueIsRange,
-          [`scale--${this.scale}`]: true
-        } },
-        this.renderGraph(),
-        h("div", { class: "track", ref: this.storeTrackRef },
-          h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
-              left: `${mirror ? 100 - maxInterval : minInterval}%`,
-              right: `${mirror ? minInterval : 100 - maxInterval}%`
-            } }),
-          h("div", { class: "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
-              }, 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 })))));
+      }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, 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", { class: {
+        ["container"]: true,
+        ["container--range"]: valueIsRange,
+        [`scale--${this.scale}`]: true
+      } }, this.renderGraph(), h("div", { class: "track", ref: this.storeTrackRef }, h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
+        left: `${mirror ? 100 - maxInterval : minInterval}%`,
+        right: `${mirror ? minInterval : 100 - maxInterval}%`
+      } }), h("div", { class: "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
+        }, 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 })))));
   }
   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;
@@ -845,553 +790,571 @@ export class Slider {
   }
   static get is() { return "calcite-slider"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["slider.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["slider.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "groupSeparator": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, number values are displayed with a group separator corresponding to the language and country format."
+  static get originalStyleUrls() {
+    return {
+      "$": ["slider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["slider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "group-separator",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "hasHistogram": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "groupSeparator": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, number values are displayed with a group separator corresponding to the language and country format."
+        },
+        "attribute": "group-separator",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, indicates a histogram is present."
+      "hasHistogram": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, indicates a histogram is present."
+        },
+        "attribute": "has-histogram",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "has-histogram",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "histogram": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DataSeries",
-        "resolved": "Point[]",
-        "references": {
-          "DataSeries": {
-            "location": "import",
-            "path": "../graph/interfaces"
+      "histogram": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataSeries",
+          "resolved": "Point[]",
+          "references": {
+            "DataSeries": {
+              "location": "import",
+              "path": "../graph/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "[DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/graph/interfaces.ts#L5)"
+            }],
+          "text": "A list of the histogram's x,y coordinates within the component's \"min\" and \"max\". Displays above the component's track."
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "see",
-            "text": "[DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/graph/interfaces.ts#L5)"
-          }],
-        "text": "A list of the histogram's x,y coordinates within the component's \"min\" and \"max\". Displays above the component's track."
-      }
-    },
-    "histogramStops": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ColorStop[]",
-        "resolved": "ColorStop[]",
-        "references": {
-          "ColorStop": {
-            "location": "import",
-            "path": "../graph/interfaces"
+      "histogramStops": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorStop[]",
+          "resolved": "ColorStop[]",
+          "references": {
+            "ColorStop": {
+              "location": "import",
+              "path": "../graph/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A set of single color stops for a histogram, sorted by offset ascending."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A set of single color stops for a histogram, sorted by offset ascending."
-      }
-    },
-    "labelHandles": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, displays label handles with their numeric value."
-      },
-      "attribute": "label-handles",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "labelTicks": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true and \"ticks\" is specified, displays label tick marks with their numeric value."
-      },
-      "attribute": "label-ticks",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "max": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component's maximum selectable value."
-      },
-      "attribute": "max",
-      "reflect": true,
-      "defaultValue": "100"
-    },
-    "maxLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "For multiple selections, the accessible name for the second handle, such as \"Temperature, upper bound\"."
-      },
-      "attribute": "max-label",
-      "reflect": false
-    },
-    "maxValue": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "For multiple selections, the component's upper value."
-      },
-      "attribute": "max-value",
-      "reflect": false
-    },
-    "min": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component's minimum selectable value."
-      },
-      "attribute": "min",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "minLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Accessible name for first (or only) handle, such as \"Temperature, lower bound\"."
-      },
-      "attribute": "min-label",
-      "reflect": false
-    },
-    "minValue": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "For multiple selections, the component's lower value."
-      },
-      "attribute": "min-value",
-      "reflect": false
-    },
-    "mirrored": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the slider will display values from high to low.\n\nNote that this value will be ignored if the slider has an associated histogram."
-      },
-      "attribute": "mirrored",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "labelHandles": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, displays label handles with their numeric value."
+        },
+        "attribute": "label-handles",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the name of the component on form submission."
+      "labelTicks": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true and \"ticks\" is specified, displays label tick marks with their numeric value."
+        },
+        "attribute": "label-ticks",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "name",
-      "reflect": true
-    },
-    "numberingSystem": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's maximum selectable value."
+        },
+        "attribute": "max",
+        "reflect": true,
+        "defaultValue": "100"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)"
-          }],
-        "text": "Specifies the Unicode numeral system used by the component for localization."
+      "maxLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "For multiple selections, the accessible name for the second handle, such as \"Temperature, upper bound\"."
+        },
+        "attribute": "max-label",
+        "reflect": false
       },
-      "attribute": "numbering-system",
-      "reflect": false
-    },
-    "pageStep": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "maxValue": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "For multiple selections, the component's upper value."
+        },
+        "attribute": "max-value",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the interval to move with the page up, or page down keys."
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's minimum selectable value."
+        },
+        "attribute": "min",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "attribute": "page-step",
-      "reflect": true
-    },
-    "precise": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "minLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for first (or only) handle, such as \"Temperature, lower bound\"."
+        },
+        "attribute": "min-label",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, sets a finer point for handles."
+      "minValue": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "For multiple selections, the component's lower value."
+        },
+        "attribute": "min-value",
+        "reflect": false
       },
-      "attribute": "precise",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "mirrored": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, the slider will display values from high to low.\n\nNote that this value will be ignored if the slider has an associated histogram."
+        },
+        "attribute": "mirrored",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the component must have a value on form submission."
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the name of the component on form submission."
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "snap": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "numberingSystem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the Unicode numeral system used by the component for localization."
+        },
+        "attribute": "numbering-system",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, enables snap selection in coordination with \"step\" via a mouse."
+      "pageStep": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the interval to move with the page up, or page down keys."
+        },
+        "attribute": "page-step",
+        "reflect": true
       },
-      "attribute": "snap",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "precise": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, sets a finer point for handles."
+        },
+        "attribute": "precise",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the interval to move with the up, or down keys."
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, the component must have a value in order for the form to submit."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "step",
-      "reflect": true,
-      "defaultValue": "1"
-    },
-    "ticks": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "snap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, enables snap selection in coordination with \"step\" via a mouse."
+        },
+        "attribute": "snap",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Displays tick marks on the number line at a specified interval."
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the interval to move with the up, or down keys."
+        },
+        "attribute": "step",
+        "reflect": true,
+        "defaultValue": "1"
       },
-      "attribute": "ticks",
-      "reflect": true
-    },
-    "value": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "null | number | number[]",
-        "resolved": "number | number[]",
-        "references": {}
+      "ticks": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Displays tick marks on the number line at a specified interval."
+        },
+        "attribute": "ticks",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component's value."
+      "value": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "null | number | number[]",
+          "resolved": "number | number[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's value."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "attribute": "value",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the size of the component."
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    }
-  }; }
-  static get states() { return {
-    "activeProp": {},
-    "minMaxValueRange": {},
-    "minValueDragRange": {},
-    "maxValueDragRange": {},
-    "tickValues": {},
-    "globalAttributes": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteSliderInput",
-      "name": "calciteSliderInput",
-      "bubbles": true,
-      "cancelable": false,
-      "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."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteSliderChange",
-      "name": "calciteSliderChange",
-      "bubbles": true,
-      "cancelable": false,
-      "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."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteSliderUpdate",
-      "name": "calciteSliderUpdate",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use \"calciteSliderInput\" instead."
-          }],
-        "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."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
       }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "effectiveLocale": {},
+      "activeProp": {},
+      "minMaxValueRange": {},
+      "minValueDragRange": {},
+      "maxValueDragRange": {},
+      "tickValues": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteSliderInput",
+        "name": "calciteSliderInput",
+        "bubbles": true,
+        "cancelable": false,
+        "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."
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteSliderChange",
+        "name": "calciteSliderChange",
+        "bubbles": true,
+        "cancelable": false,
+        "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."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteSliderUpdate",
+        "name": "calciteSliderUpdate",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `calciteSliderInput` instead."
+            }],
+          "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."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "histogram",
-      "methodName": "histogramWatcher"
-    }, {
-      "propName": "value",
-      "methodName": "valueHandler"
-    }, {
-      "propName": "minValue",
-      "methodName": "minMaxValueHandler"
-    }, {
-      "propName": "maxValue",
-      "methodName": "minMaxValueHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "keyDownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "pointerdown",
-      "method": "pointerDownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "histogram",
+        "methodName": "histogramWatcher"
+      }, {
+        "propName": "value",
+        "methodName": "valueHandler"
+      }, {
+        "propName": "minValue",
+        "methodName": "minMaxValueHandler"
+      }, {
+        "propName": "maxValue",
+        "methodName": "minMaxValueHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "keyDownHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "pointerdown",
+        "method": "pointerDownHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }];
+  }
 }