@esri/calcite-components 1.0.0-beta.95 → 1.0.0-beta.97

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

@@ -1,18 +1,17 @@
 /*!
  * 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-beta.95
+ * v1.0.0-beta.97
  */
-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 { intersects, isPrimaryPointerButton } from "../../utils/dom";
 import { clamp, decimalPlaces } from "../../utils/math";
 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);
@@ -24,35 +23,35 @@ export class Slider {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, interaction is prevented and the component is displayed with lower opacity. */
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     /**
-     * When true, number values are displayed with a group separator corresponding to the language and country format.
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
      */
     this.groupSeparator = false;
-    /** When true, indicates a histogram is present. */
+    /** When `true`, indicates a histogram is present. */
     this.hasHistogram = false;
-    /** When true, displays label handles with their numeric value. */
+    /** When `true`, displays label handles with their numeric value. */
     this.labelHandles = false;
-    /** When true and "ticks" is specified, displays label tick marks with their numeric value. */
+    /** When `true` and `ticks` is specified, displays label tick marks with their numeric value. */
     this.labelTicks = false;
     /** The component's maximum selectable value. */
     this.max = 100;
     /** The component's minimum selectable value. */
     this.min = 0;
     /**
-     * When true, the slider will display values from high to low.
+     * When `true`, the slider will display values from high to low.
      *
      * Note that this value will be ignored if the slider has an associated histogram.
      */
     this.mirrored = false;
-    /** When true, sets a finer point for handles. */
+    /** 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. */
+    /** When `true`, enables snap selection in coordination with `step` via a mouse. */
     this.snap = false;
     /** Specifies the interval to move with the up, or down keys. */
     this.step = 1;
@@ -62,13 +61,13 @@ export class Slider {
      *  Specifies the size of the component.
      */
     this.scale = "m";
-    this.guid = `calcite-slider-${guid()}`;
     this.activeProp = "value";
+    this.guid = `calcite-slider-${guid()}`;
+    this.effectiveLocale = "";
     this.minMaxValueRange = null;
     this.minValueDragRange = null;
     this.maxValueDragRange = null;
     this.tickValues = [];
-    this.globalAttributes = {};
     this.dragUpdate = (event) => {
       event.preventDefault();
       if (this.dragProp) {
@@ -80,8 +79,10 @@ export class Slider {
             if (newMaxValue <= this.max &&
               newMinValue >= this.min &&
               newMaxValue - newMinValue === this.minMaxValueRange) {
-              this.minValue = this.clamp(newMinValue, "minValue");
-              this.maxValue = this.clamp(newMaxValue, "maxValue");
+              this.setValue({
+                minValue: this.clamp(newMinValue, "minValue"),
+                maxValue: this.clamp(newMaxValue, "maxValue")
+              });
             }
           }
           else {
@@ -91,10 +92,16 @@ export class Slider {
           }
         }
         else {
-          this.setValue(this.dragProp, this.clamp(value, this.dragProp));
+          this.setValue({ [this.dragProp]: this.clamp(value, this.dragProp) });
         }
       }
     };
+    this.pointerUpDragEnd = (event) => {
+      if (!isPrimaryPointerButton(event)) {
+        return;
+      }
+      this.dragEnd(event);
+    };
     this.dragEnd = (event) => {
       this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
@@ -117,16 +124,18 @@ export class Slider {
       this.trackEl = node;
     };
     /**
-     * Returns a string representing the localized label value based on groupSeparator prop being on or off.
+     * Returns a string representing the localized label value based if the groupSeparator prop is parsed.
      *
      * @param value
      */
     this.determineGroupSeparator = (value) => {
-      const lang = this.globalAttributes["lang"] || document.documentElement.lang || "en";
-      if (value) {
-        return this.groupSeparator
-          ? localizeNumberString(value.toString(), lang, this.groupSeparator, this.numberingSystem)
-          : value;
+      if (typeof value === "number") {
+        numberStringFormatter.numberFormatOptions = {
+          locale: this.effectiveLocale,
+          numberingSystem: this.numberingSystem,
+          useGrouping: this.groupSeparator
+        };
+        return numberStringFormatter.localize(value.toString());
       }
     };
   }
@@ -145,17 +154,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();
@@ -203,158 +212,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: (event) => this.pointerDownDragStart(event, 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: (event) => this.pointerDownDragStart(event, 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: (event) => this.pointerDownDragStart(event, 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: (event) => this.pointerDownDragStart(event, 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: (event) => this.pointerDownDragStart(event, 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: (event) => this.pointerDownDragStart(event, 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: (event) => this.pointerDownDragStart(event, 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: (event) => this.pointerDownDragStart(event, "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: (event) => this.pointerDownDragStart(event, "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: (event) => this.pointerDownDragStart(event, "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: (event) => this.pointerDownDragStart(event, "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: (event) => this.pointerDownDragStart(event, "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: (event) => this.pointerDownDragStart(event, "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;
@@ -463,11 +414,15 @@ export class Slider {
     }
     event.preventDefault();
     const fixedDecimalAdjustment = Number(adjustment.toFixed(decimalPlaces(step)));
-    this.setValue(activeProp, this.clamp(fixedDecimalAdjustment, activeProp));
+    this.setValue({
+      [activeProp]: this.clamp(fixedDecimalAdjustment, activeProp)
+    });
   }
   pointerDownHandler(event) {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
     const x = event.clientX || event.pageX;
-    this.focusActiveHandle(x);
     const position = this.translate(x);
     let prop = "value";
     if (isRange(this.value)) {
@@ -484,8 +439,9 @@ export class Slider {
     this.dragStart(prop);
     const isThumbActive = this.el.shadowRoot.querySelector(".thumb:active");
     if (!isThumbActive) {
-      this.setValue(prop, this.clamp(position, prop));
+      this.setValue({ [prop]: this.clamp(position, prop) });
     }
+    this.focusActiveHandle(x);
   }
   handleTouchStart(event) {
     // needed to prevent extra click at the end of a handle drag
@@ -540,12 +496,18 @@ export class Slider {
     }
     return ticks;
   }
+  pointerDownDragStart(event, prop) {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+    this.dragStart(prop);
+  }
   dragStart(prop) {
     this.dragProp = prop;
     this.lastDragProp = this.dragProp;
     this.activeProp = prop;
     document.addEventListener("pointermove", this.dragUpdate);
-    document.addEventListener("pointerup", this.dragEnd);
+    document.addEventListener("pointerup", this.pointerUpDragEnd);
     document.addEventListener("pointercancel", this.dragEnd);
   }
   focusActiveHandle(valueX) {
@@ -554,6 +516,7 @@ export class Slider {
         this.minHandle.focus();
         break;
       case "maxValue":
+      case "value":
         this.maxHandle.focus();
         break;
       case "minMaxValue":
@@ -572,22 +535,27 @@ export class Slider {
   }
   removeDragListeners() {
     document.removeEventListener("pointermove", this.dragUpdate);
-    document.removeEventListener("pointerup", this.dragEnd);
+    document.removeEventListener("pointerup", this.pointerUpDragEnd);
     document.removeEventListener("pointercancel", this.dragEnd);
   }
   /**
-   * Set the prop value if changed at the component level
+   * Set prop value(s) if changed at the component level
    *
-   * @param valueProp
-   * @param value
+   * @param {object} values - a set of key/value pairs delineating what properties in the component to update
    */
-  setValue(valueProp, value) {
-    const oldValue = this[valueProp];
-    const valueChanged = oldValue !== value;
+  setValue(values) {
+    let valueChanged;
+    Object.keys(values).forEach((propName) => {
+      const newValue = values[propName];
+      if (!valueChanged) {
+        const oldValue = this[propName];
+        valueChanged = oldValue !== newValue;
+      }
+      this[propName] = newValue;
+    });
     if (!valueChanged) {
       return;
     }
-    this[valueProp] = value;
     const dragging = this.dragProp;
     if (!dragging) {
       this.emitChange();
@@ -847,553 +815,570 @@ 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": {},
+      "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
+      }];
+  }
 }