From dd6d18626f90a6d956ac4e7c75b007285da40a23 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Wed, 20 May 2020 11:48:15 -0700
Subject: [PATCH 01/52] Adding hasHistogram prop for use in css later

---
 src/components/calcite-slider/calcite-slider.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 3096ef4a1aa..7d354f99f0b 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -10,6 +10,7 @@ import {
   h,
   State,
   VNode,
+  Watch,
 } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { getKey } from "../../utils/key";
@@ -68,6 +69,11 @@ export class CalciteSlider {
   @Prop() precise?: boolean;
   /** Display a histogram above the slider */
   @Prop() histogram?: DataSeries;
+  @Watch("histogram") histogramWatcher(newHistogram) {
+    this.hasHistogram = newHistogram ? true : false;
+  }
+  /** Indicates if a histogram is present */
+  @Prop({ reflect: true, mutable: true }) hasHistogram: boolean = false;
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -80,6 +86,9 @@ export class CalciteSlider {
     if (this.snap) {
       this.value = this.getClosestStep(this.value);
     }
+    if (this.histogram) {
+      this.hasHistogram = true;
+    }
     this.calciteSliderUpdate.emit();
   }
 

From 0a978e836803fc0f0287f3e75bc2290a4d2deafc Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Wed, 20 May 2020 15:15:56 -0700
Subject: [PATCH 02/52] refactor: replacing borders with box-shadow and
 increasing the hitbox of the value/maxValue handle with the :after trick. 
 This commit breaks the minValue handle, but we'll fix that in the next commit

---
 .../calcite-slider/calcite-slider.scss        | 65 ++++++++++---------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 0aa119fd9cb..83d868a67dc 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -43,40 +43,49 @@ $tick-height: 4px;
   margin-bottom: $thumb-size + $thumb-padding;
 }
 
-// focus styles
-.thumb {
-  @include focus-style-base();
-  &:focus {
-    @include focus-style-outset();
-  }
-}
-
 .thumb {
   position: absolute;
-  height: $thumb-size;
-  width: $thumb-size;
-  margin: -15px;
+  top: -5px;
   box-sizing: border-box;
   border: none;
   background: transparent;
   cursor: pointer;
   font-family: inherit;
   z-index: 2;
-}
+  outline: none;
 
-.handle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: $handle-size;
-  width: $handle-size;
-  margin: $thumb-padding;
-  box-sizing: border-box;
-  border-radius: 100%;
-  background-color: var(--calcite-ui-foreground-1);
-  border: 2px solid var(--calcite-ui-text-3);
-  transition: border 0.25s ease, background-color 0.25s ease,
-    box-shadow 0.25s ease;
+  .handle {
+    @include focus-style-base();
+    position: absolute;
+    top: 6px;
+    height: $handle-size;
+    width: $handle-size;
+    box-sizing: border-box;
+    border-radius: 100%;
+    background-color: var(--calcite-ui-foreground-1);
+    box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
+    transition: border 0.25s ease, background-color 0.25s ease,
+      box-shadow 0.25s ease;
+    &:after {
+      content: "";
+      position: absolute;
+      top: -6px;
+      left: -6px;
+      width: 26px;
+      height: 26px;
+    }
+  }
+
+  &:hover {
+    .handle {
+      box-shadow: 0 0 0 3px var(--calcite-ui-blue-1) inset;
+    }
+  }
+
+  &:focus .handle {
+    @include focus-style-outset();
+    outline-offset: 6px;
+  }
 }
 
 .handle__label {
@@ -92,12 +101,6 @@ $tick-height: 4px;
   text-align: center;
 }
 
-.thumb:hover .handle {
-  border-width: 3px;
-  border-color: var(--calcite-ui-blue-1);
-  @include shadow(1, "hover");
-}
-
 .thumb:focus,
 .thumb--active {
   z-index: 3;

From 61156752ad75e7626a97f6baffe3479d46097f1a Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Wed, 20 May 2020 15:41:35 -0700
Subject: [PATCH 03/52] fixing the minValue handle position post-refactor

---
 src/components/calcite-slider/calcite-slider.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 83d868a67dc..3b830e1561d 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -46,7 +46,6 @@ $tick-height: 4px;
 .thumb {
   position: absolute;
   top: -5px;
-  box-sizing: border-box;
   border: none;
   background: transparent;
   cursor: pointer;
@@ -75,6 +74,9 @@ $tick-height: 4px;
       height: 26px;
     }
   }
+  &.thumb--min .handle {
+    left: -7px;
+  }
 
   &:hover {
     .handle {

From 414c1791d2a50341ce49846e5a8891737cb45742 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 21 May 2020 14:45:30 -0700
Subject: [PATCH 04/52] fix: handles not perfectly centered at both ends of the
 track

---
 src/components/calcite-slider/calcite-slider.scss | 5 +++--
 src/demos/calcite-slider.html                     | 5 ++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 3b830e1561d..7d4fe0f61f7 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -45,18 +45,19 @@ $tick-height: 4px;
 
 .thumb {
   position: absolute;
-  top: -5px;
   border: none;
   background: transparent;
   cursor: pointer;
   font-family: inherit;
   z-index: 2;
   outline: none;
+  padding: 0;
 
   .handle {
     @include focus-style-base();
     position: absolute;
-    top: 6px;
+    top: -8px;
+    left: -7px;
     height: $handle-size;
     width: $handle-size;
     box-sizing: border-box;
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 2ff9fb90187..33f0fe5bc4b 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -27,7 +27,10 @@
   <h1>Calcite Slider</h1>
 
   <h3>Single Value</h3>
-  <calcite-slider id="mySlider" min="0" max="100" value="25" step="1" label="Temperature"></calcite-slider>
+  <div style="background: #CCC; border: 1px solid black; padding: 10px;">
+    <!-- <calcite-slider id="mySlider" min="0" max="1000000" value="1000000" step="1" label="Temperature" label-handles></calcite-slider> -->
+    <calcite-slider id="mySlider" min="0" max="1000000" value="0" step="1" label="Temperature" ></calcite-slider>
+  </div>
   <h3>Disabled</h3>
   <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled>
   </calcite-slider>

From fae8d404ea268891fc1c22204c78a6a03c54134d Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 22 May 2020 09:03:29 -0700
Subject: [PATCH 05/52] Attempt at using getBoundingClientRect to change
 positioning

---
 .../calcite-slider/calcite-slider.scss        | 12 +++--
 .../calcite-slider/calcite-slider.tsx         | 52 ++++++++++++++++++-
 src/demos/calcite-slider.html                 |  8 ++-
 3 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 7d4fe0f61f7..d9de2d49bba 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -93,15 +93,17 @@ $tick-height: 4px;
 
 .handle__label {
   position: absolute;
-  left: 0;
-  bottom: $thumb-size;
-  width: $thumb-size;
-  height: 0.75em;
+  bottom: 14px;
   @include font-size(-3);
   font-weight: 500;
   line-height: 1;
   color: var(--calcite-ui-text-3);
-  text-align: center;
+  &--visible {
+    left: 0;
+  }
+  &--obscured {
+    right: -7px;
+  }
 }
 
 .thumb:focus,
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 7d354f99f0b..dcfd083ba02 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -100,6 +100,10 @@ export class CalciteSlider {
     const left = `${this.getUnitInterval(min) * 100}%`;
     const right = `${100 - this.getUnitInterval(max) * 100}%`;
 
+    console.clear();
+    const isLabelOutOfViewport = this.handleLabelOutOfViewport();
+    console.log(`render ${isLabelOutOfViewport}`);
+
     return (
       <Host id={id} is-range={this.isRange}>
         {this.renderGraph()}
@@ -196,7 +200,14 @@ export class CalciteSlider {
         >
           <span class="handle"></span>
           {this.labelHandles ? (
-            <span class="handle__label" aria-hidden="true">
+            <span
+              class={{
+                handle__label: true,
+                "handle__label--visible": !isLabelOutOfViewport,
+                "handle__label--obscured": isLabelOutOfViewport,
+              }}
+              aria-hidden="true"
+            >
               {this[maxProp]}
             </span>
           ) : (
@@ -358,6 +369,18 @@ export class CalciteSlider {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  private handleLabelOutOfViewport(): boolean {
+    if (this.labelHandles) {
+      const handleLabelElement = this.el.shadowRoot.querySelector(
+        ".handle__label"
+      );
+      if (handleLabelElement) {
+        return this.isOutOfViewport(handleLabelElement).any;
+      }
+      return false;
+    }
+    return false;
+  }
   private generateTickValues(): number[] {
     const ticks = [];
     let current = this.min;
@@ -481,4 +504,31 @@ export class CalciteSlider {
     const range = this.max - this.min;
     return (num - this.min) / range;
   }
+  /*!
+   * Check if an element is out of the viewport
+   * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
+   * @link https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
+   * @param  {Node}  elem The element to check
+   * @return {Object}     A set of booleans for each side of the element
+   * @internal
+   */
+  private isOutOfViewport(elem: any) {
+    // Get element's bounding
+    var bounding = elem.getBoundingClientRect();
+
+    // Check if it's out of the viewport on each side
+    var out = {} as Record<string, any>;
+    out.top = bounding.top < 0;
+    out.left = bounding.left < 0;
+    out.bottom =
+      bounding.bottom >
+      (window.innerHeight || document.documentElement.clientHeight);
+    out.right =
+      bounding.right >
+      (window.innerWidth || document.documentElement.clientWidth);
+    out.any = out.top || out.left || out.bottom || out.right;
+    out.all = out.top && out.left && out.bottom && out.right;
+
+    return out;
+  }
 }
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 33f0fe5bc4b..3079dff0817 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -27,10 +27,8 @@
   <h1>Calcite Slider</h1>
 
   <h3>Single Value</h3>
-  <div style="background: #CCC; border: 1px solid black; padding: 10px;">
-    <!-- <calcite-slider id="mySlider" min="0" max="1000000" value="1000000" step="1" label="Temperature" label-handles></calcite-slider> -->
-    <calcite-slider id="mySlider" min="0" max="1000000" value="0" step="1" label="Temperature" ></calcite-slider>
-  </div>
+  <calcite-slider id="mySlider" min="0" max="1000" value="1000" step="1" label="Temperature" label-handles></calcite-slider>
+  <!-- <calcite-slider id="mySlider" min="0" max="1000" value="0" step="1" label="Temperature" ></calcite-slider>
   <h3>Disabled</h3>
   <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled>
   </calcite-slider>
@@ -91,7 +89,7 @@ <h3>Event Listener</h3>
     [].slice.call(document.querySelectorAll(".js-histogram")).forEach(function (graphElement) {
       graphElement.histogram = histogram;
     });
-  </script>
+  </script> -->
 </body>
 
 </html>

From d2ed0db88d7f479690bcf9146e9e967b9f2c531b Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 22 May 2020 10:19:33 -0700
Subject: [PATCH 06/52] got a poc of it working!  still more to do to make this
 bulletproof though

---
 .../calcite-slider/calcite-slider.scss        |  3 ++
 .../calcite-slider/calcite-slider.tsx         | 54 ++++++++++++-------
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index d9de2d49bba..1fbcda26ceb 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -105,6 +105,9 @@ $tick-height: 4px;
     right: -7px;
   }
 }
+.handle__label--visible-copy {
+  opacity: 0;
+}
 
 .thumb:focus,
 .thumb--active {
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index dcfd083ba02..b709dc05136 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -92,6 +92,10 @@ export class CalciteSlider {
     this.calciteSliderUpdate.emit();
   }
 
+  componentDidRender() {
+    this.isHandleLabelObscured();
+  }
+
   render() {
     const id = this.el.id || this.guid;
     const min = this.minValue || this.min;
@@ -100,10 +104,6 @@ export class CalciteSlider {
     const left = `${this.getUnitInterval(min) * 100}%`;
     const right = `${100 - this.getUnitInterval(max) * 100}%`;
 
-    console.clear();
-    const isLabelOutOfViewport = this.handleLabelOutOfViewport();
-    console.log(`render ${isLabelOutOfViewport}`);
-
     return (
       <Host id={id} is-range={this.isRange}>
         {this.renderGraph()}
@@ -200,15 +200,27 @@ export class CalciteSlider {
         >
           <span class="handle"></span>
           {this.labelHandles ? (
-            <span
-              class={{
-                handle__label: true,
-                "handle__label--visible": !isLabelOutOfViewport,
-                "handle__label--obscured": isLabelOutOfViewport,
-              }}
-              aria-hidden="true"
-            >
-              {this[maxProp]}
+            <span>
+              <span
+                class={{
+                  handle__label: true,
+                  "handle__label--visible": !this.handleLabelObscured,
+                  "handle__label--obscured": this.handleLabelObscured,
+                }}
+                aria-hidden="true"
+              >
+                {this[maxProp]}
+              </span>
+              <span
+                class={{
+                  handle__label: true,
+                  "handle__label--visible": true,
+                  "handle__label--visible-copy": true,
+                }}
+                aria-hidden="true"
+              >
+                {this[maxProp]}
+              </span>
             </span>
           ) : (
             ""
@@ -363,23 +375,25 @@ export class CalciteSlider {
   @State() private minValueDragRange: number = null;
   /** @internal */
   @State() private maxValueDragRange: number = null;
+  /** @internal */
+  @State() private handleLabelObscured: boolean = false;
 
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
-  private handleLabelOutOfViewport(): boolean {
+  private isHandleLabelObscured() {
     if (this.labelHandles) {
-      const handleLabelElement = this.el.shadowRoot.querySelector(
-        ".handle__label"
+      const element = this.el.shadowRoot.querySelector(
+        ".handle__label--visible-copy"
       );
-      if (handleLabelElement) {
-        return this.isOutOfViewport(handleLabelElement).any;
+      if (element) {
+        this.handleLabelObscured = this.isOutOfViewport(element).any
+          ? true
+          : false;
       }
-      return false;
     }
-    return false;
   }
   private generateTickValues(): number[] {
     const ticks = [];

From 6a4c81c5f13a2fc6138dbc71266e4987ebf6b53e Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 22 May 2020 10:24:07 -0700
Subject: [PATCH 07/52] Removing unnecessary wrapping span

---
 .../calcite-slider/calcite-slider.tsx         | 44 ++++++++++---------
 src/demos/calcite-slider.html                 |  2 +-
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index b709dc05136..926e1787ffb 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -200,27 +200,29 @@ export class CalciteSlider {
         >
           <span class="handle"></span>
           {this.labelHandles ? (
-            <span>
-              <span
-                class={{
-                  handle__label: true,
-                  "handle__label--visible": !this.handleLabelObscured,
-                  "handle__label--obscured": this.handleLabelObscured,
-                }}
-                aria-hidden="true"
-              >
-                {this[maxProp]}
-              </span>
-              <span
-                class={{
-                  handle__label: true,
-                  "handle__label--visible": true,
-                  "handle__label--visible-copy": true,
-                }}
-                aria-hidden="true"
-              >
-                {this[maxProp]}
-              </span>
+            <span
+              class={{
+                handle__label: true,
+                "handle__label--visible": !this.handleLabelObscured,
+                "handle__label--obscured": this.handleLabelObscured,
+              }}
+              aria-hidden="true"
+            >
+              {this[maxProp]}
+            </span>
+          ) : (
+            ""
+          )}
+          {this.labelHandles ? (
+            <span
+              class={{
+                handle__label: true,
+                "handle__label--visible": true,
+                "handle__label--visible-copy": true,
+              }}
+              aria-hidden="true"
+            >
+              {this[maxProp]}
             </span>
           ) : (
             ""
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 3079dff0817..f7c6660aa55 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -27,7 +27,7 @@
   <h1>Calcite Slider</h1>
 
   <h3>Single Value</h3>
-  <calcite-slider id="mySlider" min="0" max="1000" value="1000" step="1" label="Temperature" label-handles></calcite-slider>
+  <calcite-slider id="mySlider" min="0" max="1000" value="800" step="1" label="Temperature" label-handles></calcite-slider>
   <!-- <calcite-slider id="mySlider" min="0" max="1000" value="0" step="1" label="Temperature" ></calcite-slider>
   <h3>Disabled</h3>
   <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled>

From 1c660f5f42a12c634daa0faddb5e95b4ad82b059 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 22 May 2020 12:07:38 -0700
Subject: [PATCH 08/52] feature: prevent handle labels from extending past edge
 of slider (normal slider mode)

---
 .../calcite-slider/calcite-slider.scss        | 20 ++++---
 .../calcite-slider/calcite-slider.tsx         | 56 ++++++++-----------
 src/demos/calcite-slider.html                 |  9 +--
 3 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 1fbcda26ceb..08938f708a9 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -52,12 +52,13 @@ $tick-height: 4px;
   z-index: 2;
   outline: none;
   padding: 0;
+  top: 0;
+  bottom: 0;
 
   .handle {
     @include focus-style-base();
     position: absolute;
-    top: -8px;
-    left: -7px;
+    transform: translate(-50%, -50%);
     height: $handle-size;
     width: $handle-size;
     box-sizing: border-box;
@@ -93,19 +94,22 @@ $tick-height: 4px;
 
 .handle__label {
   position: absolute;
-  bottom: 14px;
+  bottom: 0;
+  top: -5px;
+  transform: translate(-50%, -50%);
+  transition: transform 150ms;
   @include font-size(-3);
   font-weight: 500;
   line-height: 1;
   color: var(--calcite-ui-text-3);
-  &--visible {
-    left: 0;
+  &--obscured-right {
+    transform: translate(calc(-100% + 7px), -50%);
   }
-  &--obscured {
-    right: -7px;
+  &--obscured-left {
+    transform: translate(-7px, -50%);
   }
 }
-.handle__label--visible-copy {
+.handle__label--invisible-copy {
   opacity: 0;
 }
 
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 926e1787ffb..efab6c9cbef 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -198,13 +198,14 @@ export class CalciteSlider {
             "thumb--precise": this.precise,
           }}
         >
-          <span class="handle"></span>
           {this.labelHandles ? (
             <span
               class={{
                 handle__label: true,
-                "handle__label--visible": !this.handleLabelObscured,
-                "handle__label--obscured": this.handleLabelObscured,
+                "handle__label--obscured-right":
+                  this.handleLabelObscured === "right" && true,
+                "handle__label--obscured-left":
+                  this.handleLabelObscured === "left" && true,
               }}
               aria-hidden="true"
             >
@@ -215,11 +216,7 @@ export class CalciteSlider {
           )}
           {this.labelHandles ? (
             <span
-              class={{
-                handle__label: true,
-                "handle__label--visible": true,
-                "handle__label--visible-copy": true,
-              }}
+              class="handle__label handle__label--invisible-copy"
               aria-hidden="true"
             >
               {this[maxProp]}
@@ -227,6 +224,7 @@ export class CalciteSlider {
           ) : (
             ""
           )}
+          <span class="handle"></span>
         </button>
       </Host>
     );
@@ -378,7 +376,7 @@ export class CalciteSlider {
   /** @internal */
   @State() private maxValueDragRange: number = null;
   /** @internal */
-  @State() private handleLabelObscured: boolean = false;
+  @State() private handleLabelObscured: "left" | "right" | "none" = "none";
 
   //--------------------------------------------------------------------------
   //
@@ -388,12 +386,10 @@ export class CalciteSlider {
   private isHandleLabelObscured() {
     if (this.labelHandles) {
       const element = this.el.shadowRoot.querySelector(
-        ".handle__label--visible-copy"
+        ".handle__label--invisible-copy"
       );
       if (element) {
-        this.handleLabelObscured = this.isOutOfViewport(element).any
-          ? true
-          : false;
+        this.handleLabelObscured = this.isOutOfViewport(element);
       }
     }
   }
@@ -520,31 +516,23 @@ export class CalciteSlider {
     const range = this.max - this.min;
     return (num - this.min) / range;
   }
-  /*!
-   * Check if an element is out of the viewport
-   * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
+  /**
+   * Checks if an element is out of the viewport on either the left or right side
    * @link https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
-   * @param  {Node}  elem The element to check
-   * @return {Object}     A set of booleans for each side of the element
+   * @return {string} "left", "right" or "none"
    * @internal
    */
   private isOutOfViewport(elem: any) {
-    // Get element's bounding
-    var bounding = elem.getBoundingClientRect();
-
-    // Check if it's out of the viewport on each side
-    var out = {} as Record<string, any>;
-    out.top = bounding.top < 0;
-    out.left = bounding.left < 0;
-    out.bottom =
-      bounding.bottom >
-      (window.innerHeight || document.documentElement.clientHeight);
-    out.right =
+    const bounding = elem.getBoundingClientRect();
+    if (bounding.left < 0) {
+      return "left";
+    }
+    if (
       bounding.right >
-      (window.innerWidth || document.documentElement.clientWidth);
-    out.any = out.top || out.left || out.bottom || out.right;
-    out.all = out.top && out.left && out.bottom && out.right;
-
-    return out;
+      (window.innerWidth || document.documentElement.clientWidth)
+    ) {
+      return "right";
+    }
+    return "none";
   }
 }
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index f7c6660aa55..d1dff8d843f 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -24,11 +24,12 @@
 
 <body>
   <calcite-button href="/">Home</calcite-button>
-  <h1>Calcite Slider</h1>
+  <!-- <h1>Calcite Slider</h1>
 
-  <h3>Single Value</h3>
+  <h3>Single Value</h3> -->
   <calcite-slider id="mySlider" min="0" max="1000" value="800" step="1" label="Temperature" label-handles></calcite-slider>
-  <!-- <calcite-slider id="mySlider" min="0" max="1000" value="0" step="1" label="Temperature" ></calcite-slider>
+  <calcite-slider id="mySlider" min="10000" max="100000" value="100000" step="1000" label="Temperature" label-handles></calcite-slider>
+  <calcite-slider id="mySlider" min="0" max="1000" value="0" step="1" label="Temperature" ></calcite-slider>
   <h3>Disabled</h3>
   <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled>
   </calcite-slider>
@@ -89,7 +90,7 @@ <h3>Event Listener</h3>
     [].slice.call(document.querySelectorAll(".js-histogram")).forEach(function (graphElement) {
       graphElement.histogram = histogram;
     });
-  </script> -->
+  </script>
 </body>
 
 </html>

From 0e190da1fe466386c516dbf33e810af0ccae8ca4 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 22 May 2020 15:46:16 -0700
Subject: [PATCH 09/52] fix: removing unnecessary left position after refactor

---
 src/components/calcite-slider/calcite-slider.scss | 3 ---
 src/demos/calcite-slider.html                     | 8 ++++----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 08938f708a9..6e003befd06 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -76,9 +76,6 @@ $tick-height: 4px;
       height: 26px;
     }
   }
-  &.thumb--min .handle {
-    left: -7px;
-  }
 
   &:hover {
     .handle {
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index d1dff8d843f..d1d03f81bff 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -26,17 +26,17 @@
   <calcite-button href="/">Home</calcite-button>
   <!-- <h1>Calcite Slider</h1>
 
-  <h3>Single Value</h3> -->
+  <h3>Single Value</h3>
   <calcite-slider id="mySlider" min="0" max="1000" value="800" step="1" label="Temperature" label-handles></calcite-slider>
   <calcite-slider id="mySlider" min="10000" max="100000" value="100000" step="1000" label="Temperature" label-handles></calcite-slider>
   <calcite-slider id="mySlider" min="0" max="1000" value="0" step="1" label="Temperature" ></calcite-slider>
   <h3>Disabled</h3>
   <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled>
-  </calcite-slider>
+  </calcite-slider> -->
   <h3>Range</h3>
   <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
     max-label="Temperature range (upper)"></calcite-slider>
-  <h3>Ticks</h3>
+  <!-- <h3>Ticks</h3>
   <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label="Temperature"></calcite-slider>
   <h3>Handle Labels</h3>
   <calcite-slider min="0" max="100" min-value="23" max-value="46" step="1" ticks="10" label-handles precise
@@ -90,7 +90,7 @@ <h3>Event Listener</h3>
     [].slice.call(document.querySelectorAll(".js-histogram")).forEach(function (graphElement) {
       graphElement.histogram = histogram;
     });
-  </script>
+  </script> -->
 </body>
 
 </html>

From 6e7696fceb0e5f30b2632177a2e030ae36640551 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 22 May 2020 16:46:15 -0700
Subject: [PATCH 10/52] feat: preventing minValue handle labels from extending
 past the edge of the slider

---
 .../calcite-slider/calcite-slider.scss        | 14 ++--
 .../calcite-slider/calcite-slider.tsx         | 68 +++++++++++++------
 src/demos/calcite-slider.html                 | 17 +++--
 3 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 6e003befd06..b2f5064811b 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -63,7 +63,7 @@ $tick-height: 4px;
     width: $handle-size;
     box-sizing: border-box;
     border-radius: 100%;
-    background-color: var(--calcite-ui-foreground-1);
+    // background-color: var(--calcite-ui-foreground-1);
     box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
     transition: border 0.25s ease, background-color 0.25s ease,
       box-shadow 0.25s ease;
@@ -105,25 +105,21 @@ $tick-height: 4px;
   &--obscured-left {
     transform: translate(-7px, -50%);
   }
-}
-.handle__label--invisible-copy {
-  opacity: 0;
+  &--invisible-copy {
+    opacity: 0;
+  }
 }
 
 .thumb:focus,
 .thumb--active {
   z-index: 3;
   .handle {
-    background-color: var(--calcite-ui-blue-1);
+    // background-color: var(--calcite-ui-blue-1);
     border-color: var(--calcite-ui-blue-1);
     @include shadow(1, "press");
   }
 }
 
-.thumb--precise {
-  margin-top: -$thumb-size;
-}
-
 .thumb--precise:after {
   content: "";
   display: block;
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index efab6c9cbef..d251732bae8 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -14,9 +14,11 @@ import {
 } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { getKey } from "../../utils/key";
-type activeSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue";
 import { DataSeries } from "../../interfaces/Graph";
 
+type activeSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue";
+type OutOfViewport = "left" | "right" | "none";
+
 @Component({
   tag: "calcite-slider",
   styleUrl: "calcite-slider.scss",
@@ -93,7 +95,10 @@ export class CalciteSlider {
   }
 
   componentDidRender() {
-    this.isHandleLabelObscured();
+    this.isHandleLabelObscured("value");
+    if (this.isRange) {
+      this.isHandleLabelObscured("minValue");
+    }
   }
 
   render() {
@@ -164,14 +169,34 @@ export class CalciteSlider {
               "thumb--precise": this.precise,
             }}
           >
-            <span class="handle"></span>
             {this.labelHandles ? (
-              <span class="handle__label" aria-hidden="true">
+              <span
+                class={{
+                  handle__label: true,
+                  "handle__label--obscured-right":
+                    this.minValueLabelObscured === "right" && true,
+                  "handle__label--obscured-left":
+                    this.minValueLabelObscured === "left" && true,
+                }}
+                aria-hidden="true"
+              >
+                {this.minValue}
+              </span>
+            ) : (
+              ""
+            )}
+            {this.labelHandles ? (
+              <span
+                id="handle__label--minValue"
+                class="handle__label handle__label--invisible-copy"
+                aria-hidden="true"
+              >
                 {this.minValue}
               </span>
             ) : (
               ""
             )}
+            <span class="handle"></span>
           </button>
         ) : (
           ""
@@ -203,9 +228,9 @@ export class CalciteSlider {
               class={{
                 handle__label: true,
                 "handle__label--obscured-right":
-                  this.handleLabelObscured === "right" && true,
+                  this.valueLabelObscured === "right" && true,
                 "handle__label--obscured-left":
-                  this.handleLabelObscured === "left" && true,
+                  this.valueLabelObscured === "left" && true,
               }}
               aria-hidden="true"
             >
@@ -216,6 +241,7 @@ export class CalciteSlider {
           )}
           {this.labelHandles ? (
             <span
+              id="handle__label--value"
               class="handle__label handle__label--invisible-copy"
               aria-hidden="true"
             >
@@ -376,23 +402,15 @@ export class CalciteSlider {
   /** @internal */
   @State() private maxValueDragRange: number = null;
   /** @internal */
-  @State() private handleLabelObscured: "left" | "right" | "none" = "none";
+  @State() private valueLabelObscured: OutOfViewport = "none";
+  /** @internal */
+  @State() private minValueLabelObscured: OutOfViewport = "none";
 
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
-  private isHandleLabelObscured() {
-    if (this.labelHandles) {
-      const element = this.el.shadowRoot.querySelector(
-        ".handle__label--invisible-copy"
-      );
-      if (element) {
-        this.handleLabelObscured = this.isOutOfViewport(element);
-      }
-    }
-  }
   private generateTickValues(): number[] {
     const ticks = [];
     let current = this.min;
@@ -516,14 +534,26 @@ export class CalciteSlider {
     const range = this.max - this.min;
     return (num - this.min) / range;
   }
+  private isHandleLabelObscured(name: "value" | "minValue") {
+    if (this.labelHandles) {
+      const element = this.el.shadowRoot.querySelector(
+        `#handle__label--${name}`
+      );
+      if (element) {
+        this[`${name}LabelObscured`] = this.isOutOfViewport(
+          element as HTMLElement
+        );
+      }
+    }
+  }
   /**
    * Checks if an element is out of the viewport on either the left or right side
    * @link https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
    * @return {string} "left", "right" or "none"
    * @internal
    */
-  private isOutOfViewport(elem: any) {
-    const bounding = elem.getBoundingClientRect();
+  private isOutOfViewport(element: HTMLElement): OutOfViewport {
+    const bounding = element.getBoundingClientRect();
     if (bounding.left < 0) {
       return "left";
     }
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index d1d03f81bff..691e93264b0 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -27,30 +27,29 @@
   <!-- <h1>Calcite Slider</h1>
 
   <h3>Single Value</h3>
-  <calcite-slider id="mySlider" min="0" max="1000" value="800" step="1" label="Temperature" label-handles></calcite-slider>
-  <calcite-slider id="mySlider" min="10000" max="100000" value="100000" step="1000" label="Temperature" label-handles></calcite-slider>
-  <calcite-slider id="mySlider" min="0" max="1000" value="0" step="1" label="Temperature" ></calcite-slider>
+  <calcite-slider min="0" max="1000" value="800" step="1" label="Temperature" label-handles></calcite-slider>
+  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" label-handles></calcite-slider>
   <h3>Disabled</h3>
   <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled>
   </calcite-slider> -->
   <h3>Range</h3>
-  <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
-    max-label="Temperature range (upper)"></calcite-slider>
+  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1" min-label="Temperature range (lower)"
+    max-label="Temperature range (upper)" label-handles></calcite-slider>
   <!-- <h3>Ticks</h3>
-  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label="Temperature"></calcite-slider>
+  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label="Temperature"></calcite-slider> -->
   <h3>Handle Labels</h3>
   <calcite-slider min="0" max="100" min-value="23" max-value="46" step="1" ticks="10" label-handles precise
     label="Temperature"></calcite-slider>
-  <h3>Tick Labels</h3>
+  <!-- <h3>Tick Labels</h3>
   <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks label="Temperature">
-  </calcite-slider>
+  </calcite-slider> -->
   <h3>"Precise" handle</h3>
   <calcite-slider min="0" max="100" value="23" step="1" label="Temperature" precise></calcite-slider>
   <h3>"Precise" Range</h3>
   <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
     max-label="Temperature range (upper)" precise></calcite-slider>
 
-  <div style="max-width: 400px">
+  <!-- <div style="max-width: 400px">
     <h3>Histogram</h3>
     <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
     <h3>Histogram Range</h3>

From 0222032d7f907921fb7a78e0dc836804e3a94ca5 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Tue, 26 May 2020 12:10:07 -0700
Subject: [PATCH 11/52] fix: correcting placement of min precise handle

---
 .../calcite-slider/calcite-slider.scss        | 11 ++++-----
 src/demos/calcite-slider.html                 | 23 ++++++++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index b2f5064811b..3e59dfb5493 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -141,16 +141,15 @@ $tick-height: 4px;
 }
 
 .thumb--precise.thumb--min {
-  margin-top: -$track-height;
+  margin-top: 21px;
   .handle__label {
     bottom: unset;
     top: $thumb-size;
   }
-}
-
-.thumb--precise.thumb--min:after {
-  top: 0;
-  margin-top: 0;
+  &:after {
+    top: -14px;
+    margin-top: 0;
+  }
 }
 
 .track {
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 691e93264b0..59fe30be007 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -32,22 +32,29 @@ <h3>Single Value</h3>
   <h3>Disabled</h3>
   <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled>
   </calcite-slider> -->
+
   <h3>Range</h3>
+  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1" min-label="Temperature range (lower)"
+    max-label="Temperature range (upper)"></calcite-slider>
+
+  <h3>Precise Range</h3>
+  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+    min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise></calcite-slider>
+
+  <h3>Range Handle Labels</h3>
   <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1" min-label="Temperature range (lower)"
     max-label="Temperature range (upper)" label-handles></calcite-slider>
+
+  <h3>Precise Range Handle Labels</h3>
+  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+    min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise label-handles></calcite-slider>
+
   <!-- <h3>Ticks</h3>
   <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label="Temperature"></calcite-slider> -->
-  <h3>Handle Labels</h3>
-  <calcite-slider min="0" max="100" min-value="23" max-value="46" step="1" ticks="10" label-handles precise
-    label="Temperature"></calcite-slider>
+
   <!-- <h3>Tick Labels</h3>
   <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks label="Temperature">
   </calcite-slider> -->
-  <h3>"Precise" handle</h3>
-  <calcite-slider min="0" max="100" value="23" step="1" label="Temperature" precise></calcite-slider>
-  <h3>"Precise" Range</h3>
-  <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
-    max-label="Temperature range (upper)" precise></calcite-slider>
 
   <!-- <div style="max-width: 400px">
     <h3>Histogram</h3>

From 545c9942c5b40e11d29a9130207ca044dba0763c Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Tue, 26 May 2020 15:05:52 -0700
Subject: [PATCH 12/52] fix: precise handle position

---
 .../calcite-slider/calcite-slider.scss        | 56 +++++++++++--------
 src/demos/calcite-slider.html                 |  4 +-
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 3e59dfb5493..5d212f898c5 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -120,18 +120,38 @@ $tick-height: 4px;
   }
 }
 
-.thumb--precise:after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: $handle-size;
-  left: 50%;
-  width: 2px;
-  height: $thumb-padding;
-  background-color: var(--calcite-ui-text-3);
-  margin-left: -1px;
-  margin-top: $thumb-padding;
-  z-index: 1;
+.thumb--precise {
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: $handle-size;
+    left: 50%;
+    width: 2px;
+    height: $thumb-padding;
+    background-color: var(--calcite-ui-text-3);
+    margin-left: -1px;
+    z-index: 1;
+  }
+  &.thumb--min {
+    margin-top: 21px;
+    .handle__label {
+      bottom: unset;
+      top: $thumb-size;
+    }
+    &:after {
+      top: -14px;
+      margin-top: 0;
+    }
+  }
+  &.thumb--max {
+    .handle {
+      top: -5px;
+    }
+    &:after {
+      top: 2px;
+    }
+  }
 }
 
 .thumb:hover.thumb--precise:after,
@@ -140,18 +160,6 @@ $tick-height: 4px;
   background-color: var(--calcite-ui-blue-1);
 }
 
-.thumb--precise.thumb--min {
-  margin-top: 21px;
-  .handle__label {
-    bottom: unset;
-    top: $thumb-size;
-  }
-  &:after {
-    top: -14px;
-    margin-top: 0;
-  }
-}
-
 .track {
   height: $track-height;
   border-radius: 0;
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 59fe30be007..ec1c59f0926 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -22,9 +22,9 @@
   <script nomodule src="../build/calcite.js"></script>
 </head>
 
-<body>
+<body><!--
   <calcite-button href="/">Home</calcite-button>
-  <!-- <h1>Calcite Slider</h1>
+  <h1>Calcite Slider</h1>
 
   <h3>Single Value</h3>
   <calcite-slider min="0" max="1000" value="800" step="1" label="Temperature" label-handles></calcite-slider>

From d6d9e67b41c6ae8475a0cdf443d76fee9f184a80 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Tue, 26 May 2020 15:17:15 -0700
Subject: [PATCH 13/52] fix: precise handle label positions

---
 src/components/calcite-slider/calcite-slider.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 5d212f898c5..fe4836be64b 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -137,7 +137,7 @@ $tick-height: 4px;
     margin-top: 21px;
     .handle__label {
       bottom: unset;
-      top: $thumb-size;
+      top: 19px;
     }
     &:after {
       top: -14px;
@@ -145,6 +145,9 @@ $tick-height: 4px;
     }
   }
   &.thumb--max {
+    .handle__label {
+      top: -14px;
+    }
     .handle {
       top: -5px;
     }

From ecaacd463096d6c05c5e73bbb5f04a834c11f491 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Wed, 27 May 2020 13:07:14 -0700
Subject: [PATCH 14/52] feat: only min and max tick labels appear for precise
 ranges

---
 .../calcite-slider/calcite-slider.tsx         | 49 ++++++++----
 src/demos/calcite-slider.html                 | 78 ++++++++++++++-----
 2 files changed, 92 insertions(+), 35 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index d251732bae8..6724399e9c9 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -120,29 +120,17 @@ export class CalciteSlider {
             style={{ left, right }}
           />
           <div class="ticks">
-            {this.tickValues.map((number) => (
+            {this.tickValues.map((tick) => (
               <span
                 class={{
                   tick: true,
-                  "tick--active": number >= min && number <= max,
+                  "tick--active": tick >= min && tick <= max,
                 }}
                 style={{
-                  left: `${this.getUnitInterval(number) * 100}%`,
+                  left: `${this.getUnitInterval(tick) * 100}%`,
                 }}
               >
-                {this.labelTicks ? (
-                  <span
-                    class={{
-                      tick__label: true,
-                      "tick__label--min": number === this.min,
-                      "tick__label--max": number === this.max,
-                    }}
-                  >
-                    {number}
-                  </span>
-                ) : (
-                  ""
-                )}
+                {this.renderTickLabel(tick)}
               </span>
             ))}
           </div>
@@ -269,6 +257,35 @@ export class CalciteSlider {
       </div>
     ) : null;
   }
+
+  private renderTickLabel(tick: number): VNode {
+    const tickLabel = (
+      <span
+        class={{
+          tick__label: true,
+          "tick__label--min": tick === this.min,
+          "tick__label--max": tick === this.max,
+        }}
+      >
+        {tick}
+      </span>
+    );
+    if (this.labelTicks) {
+      if (this.isRange) {
+        if (this.precise) {
+          if (tick === this.min || tick === this.max) {
+            return tickLabel;
+          } else {
+            return null;
+          }
+        }
+        return tickLabel;
+      }
+      return tickLabel;
+    }
+    return null;
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index ec1c59f0926..5c41e2fc5c6 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -22,60 +22,100 @@
   <script nomodule src="../build/calcite.js"></script>
 </head>
 
-<body><!--
+<body>
   <calcite-button href="/">Home</calcite-button>
   <h1>Calcite Slider</h1>
 
-  <h3>Single Value</h3>
-  <calcite-slider min="0" max="1000" value="800" step="1" label="Temperature" label-handles></calcite-slider>
+  <h2>Single Value</h2>
+
+  <h3>Handle</h3>
+  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature"></calcite-slider>
+
+  <h3>Precise Handle</h3>
+  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise></calcite-slider>
+
+  <h3>Labeled Handle</h3>
   <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" label-handles></calcite-slider>
+
+  <h3>Precise Labeled Handle</h3>
+  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise label-handles></calcite-slider>
+
+  <h3>Handle with Ticks</h3>
+  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label="Temperature"></calcite-slider>
+
+  <h3>Handle with Labeled Ticks</h3>
+  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks label="Temperature"></calcite-slider>
+
+  <h3>Precise Handle with Labeled Ticks</h3>
+  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks precise label="Temperature"></calcite-slider>
+
+  <h3>Precise Labeled Handle with Labeled Ticks</h3>
+  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-handles label-ticks precise label="Temperature"></calcite-slider>
+
   <h3>Disabled</h3>
-  <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled>
-  </calcite-slider> -->
+  <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled></calcite-slider>
+
+  <h2>Range</h2>
 
-  <h3>Range</h3>
+  <h3>Handles</h3>
   <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1" min-label="Temperature range (lower)"
     max-label="Temperature range (upper)"></calcite-slider>
 
-  <h3>Precise Range</h3>
-  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
-    min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise></calcite-slider>
-
-  <h3>Range Handle Labels</h3>
+  <h3>Labeled Handles</h3>
   <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1" min-label="Temperature range (lower)"
     max-label="Temperature range (upper)" label-handles></calcite-slider>
 
-  <h3>Precise Range Handle Labels</h3>
+  <h3>Precise Handles</h3>
+  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+    min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise></calcite-slider>
+
+  <h3>Precise Labeled Handles</h3>
   <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
     min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise label-handles></calcite-slider>
 
-  <!-- <h3>Ticks</h3>
-  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label="Temperature"></calcite-slider> -->
+  <h3>Handles with Ticks</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature"></calcite-slider>
+
+  <h3>Handles with Labeled Ticks</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-ticks></calcite-slider>
+
+  <h3>Precise Handle with Labeled Ticks</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise label-ticks></calcite-slider>
+
+  <h3>Precise Labeled Handle with Labeled Ticks</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise label-handles label-ticks></calcite-slider>
 
-  <!-- <h3>Tick Labels</h3>
-  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks label="Temperature">
-  </calcite-slider> -->
+  <div style="max-width: 400px">
 
-  <!-- <div style="max-width: 400px">
     <h3>Histogram</h3>
     <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
+
     <h3>Histogram Range</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
       max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
+
   </div>
+
   <div class="demo-background-dark" theme="dark">
+
     <h3>Dark Theme</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
       max-label="Temperature range (upper)" theme="dark" label-ticks ticks="10"></calcite-slider>
+
     <div style="max-width: 400px">
+
       <h3>Histogram Range</h3>
       <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
         max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
+
     </div>
+
   </div>
+
   <h3>Event Listener</h3>
   <calcite-slider id="sliderEvents" min="0" max="100" value="50" step="1" label="Temperature"></calcite-slider>
   <p>Current slider value is: <span id="sliderEventDisplay"></span></p>
+
   <script>
     (function () {
       var label = document.getElementById("sliderEventDisplay");
@@ -96,7 +136,7 @@ <h3>Event Listener</h3>
     [].slice.call(document.querySelectorAll(".js-histogram")).forEach(function (graphElement) {
       graphElement.histogram = histogram;
     });
-  </script> -->
+  </script>
 </body>
 
 </html>

From f149f267121fa91d6a8539e2b63c134ddf4ca03e Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Wed, 27 May 2020 16:54:12 -0700
Subject: [PATCH 15/52] restoring handle bg color

---
 src/components/calcite-slider/calcite-slider.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index fe4836be64b..59d058af5c5 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -63,7 +63,7 @@ $tick-height: 4px;
     width: $handle-size;
     box-sizing: border-box;
     border-radius: 100%;
-    // background-color: var(--calcite-ui-foreground-1);
+    background-color: var(--calcite-ui-foreground-1);
     box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
     transition: border 0.25s ease, background-color 0.25s ease,
       box-shadow 0.25s ease;
@@ -114,8 +114,7 @@ $tick-height: 4px;
 .thumb--active {
   z-index: 3;
   .handle {
-    // background-color: var(--calcite-ui-blue-1);
-    border-color: var(--calcite-ui-blue-1);
+    background-color: var(--calcite-ui-blue-1);
     @include shadow(1, "press");
   }
 }

From cd00a3dfb80e2e1808afd771924d3f89dea06563 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 28 May 2020 09:24:04 -0700
Subject: [PATCH 16/52] good start to object collision detection for hiding min
 tick label.  Much more needs to be done since it isn't perfect yet, but a
 good start

---
 .../calcite-slider/calcite-slider.scss        |  2 +
 .../calcite-slider/calcite-slider.tsx         | 59 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 59d058af5c5..66f98a10586 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -225,6 +225,7 @@ $tick-height: 4px;
   left: 0;
   margin: $thumb-size / 2 -3px;
   text-align: left;
+  transition: opacity 150ms;
 }
 
 .tick__label--max {
@@ -232,6 +233,7 @@ $tick-height: 4px;
   right: 0;
   margin: $thumb-size / 2 -3px;
   text-align: right;
+  transition: opacity 50ms;
 }
 
 .graph {
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 6724399e9c9..96da01538f4 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -98,6 +98,19 @@ export class CalciteSlider {
     this.isHandleLabelObscured("value");
     if (this.isRange) {
       this.isHandleLabelObscured("minValue");
+      if (this.precise && this.labelTicks) {
+        const minValueButton = this.el.shadowRoot.querySelector(
+          "button.thumb--min"
+        );
+        console.log(minValueButton);
+        const minTickLabel = this.el.shadowRoot.querySelector(
+          ".tick__label--min"
+        );
+        console.log(minTickLabel);
+        const isMinColliding = this.isColliding(minValueButton, minTickLabel);
+        this.minTickLabelObscured = isMinColliding ? true : false;
+        console.log(`isMinColliding:${isMinColliding}`);
+      }
     }
   }
 
@@ -259,13 +272,21 @@ export class CalciteSlider {
   }
 
   private renderTickLabel(tick: number): VNode {
+    const isMinTickLabel = tick === this.min;
+    const isMaxTickLabel = tick === this.max;
+    const isObscured =
+      (isMinTickLabel && this.minTickLabelObscured) ||
+      (isMaxTickLabel && this.maxTickLabelObscured)
+        ? true
+        : false;
     const tickLabel = (
       <span
         class={{
           tick__label: true,
-          "tick__label--min": tick === this.min,
-          "tick__label--max": tick === this.max,
+          "tick__label--min": isMinTickLabel,
+          "tick__label--max": isMaxTickLabel,
         }}
+        style={{ opacity: isObscured ? "0" : "1" }}
       >
         {tick}
       </span>
@@ -273,7 +294,7 @@ export class CalciteSlider {
     if (this.labelTicks) {
       if (this.isRange) {
         if (this.precise) {
-          if (tick === this.min || tick === this.max) {
+          if (isMinTickLabel || isMaxTickLabel) {
             return tickLabel;
           } else {
             return null;
@@ -422,6 +443,10 @@ export class CalciteSlider {
   @State() private valueLabelObscured: OutOfViewport = "none";
   /** @internal */
   @State() private minValueLabelObscured: OutOfViewport = "none";
+  /** @internal */
+  @State() private minTickLabelObscured: boolean = false;
+  /** @internal */
+  @State() private maxTickLabelObscured: boolean = false;
 
   //--------------------------------------------------------------------------
   //
@@ -582,4 +607,32 @@ export class CalciteSlider {
     }
     return "none";
   }
+  /**
+   * Detects if two elements are colliding
+   *
+   * Credit goes to BC on Stack Overflow, cleaned up a little bit
+   *
+   * @link http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery
+   * @param $div1
+   * @param $div2
+   * @returns {boolean}
+   */
+  private isColliding(div1, div2) {
+    const d1_height = div1.offsetHeight;
+    const d1_width = div1.offsetWidth;
+    const d1_distance_from_top = div1.offsetTop + d1_height;
+    const d1_distance_from_left = div1.offsetLeft + d1_width;
+
+    const d2_height = div2.offsetHeight;
+    const d2_width = div2.offsetWidth;
+    const d2_distance_from_top = div2.offsetTop + d2_height;
+    const d2_distance_from_left = div2.offsetLeft + d2_width;
+    const not_colliding =
+      d1_distance_from_top < div2.offsetTop ||
+      div1.offsetTop > d2_distance_from_top ||
+      d1_distance_from_left < div2.offsetTop ||
+      div1.offsetLeft > d2_distance_from_left;
+
+    return !not_colliding;
+  }
 }

From 20ca5f2ac545a74787b60bc475de3e88f0323da8 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 28 May 2020 14:03:04 -0700
Subject: [PATCH 17/52] breaking change: start of major layout refactor that
 moves away from positioning to using flex and transform so as to make the
 button element take shape for collision detection

---
 .../calcite-slider/calcite-slider.scss        |  38 +-
 .../calcite-slider/calcite-slider.tsx         | 412 +++++++++++++-----
 src/demos/calcite-slider.html                 |  12 +-
 3 files changed, 311 insertions(+), 151 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 66f98a10586..1f6372c3225 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -52,13 +52,12 @@ $tick-height: 4px;
   z-index: 2;
   outline: none;
   padding: 0;
-  top: 0;
-  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   .handle {
     @include focus-style-base();
-    position: absolute;
-    transform: translate(-50%, -50%);
     height: $handle-size;
     width: $handle-size;
     box-sizing: border-box;
@@ -67,14 +66,12 @@ $tick-height: 4px;
     box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
     transition: border 0.25s ease, background-color 0.25s ease,
       box-shadow 0.25s ease;
-    &:after {
-      content: "";
-      position: absolute;
-      top: -6px;
-      left: -6px;
-      width: 26px;
-      height: 26px;
-    }
+  }
+
+  .handle-extension {
+    width: 2px;
+    height: $thumb-padding;
+    background-color: var(--calcite-ui-text-3);
   }
 
   &:hover {
@@ -90,10 +87,6 @@ $tick-height: 4px;
 }
 
 .handle__label {
-  position: absolute;
-  bottom: 0;
-  top: -5px;
-  transform: translate(-50%, -50%);
   transition: transform 150ms;
   @include font-size(-3);
   font-weight: 500;
@@ -107,6 +100,8 @@ $tick-height: 4px;
   }
   &--invisible-copy {
     opacity: 0;
+    position: absolute;
+    top: 0;
   }
 }
 
@@ -132,17 +127,6 @@ $tick-height: 4px;
     margin-left: -1px;
     z-index: 1;
   }
-  &.thumb--min {
-    margin-top: 21px;
-    .handle__label {
-      bottom: unset;
-      top: 19px;
-    }
-    &:after {
-      top: -14px;
-      margin-top: 0;
-    }
-  }
   &.thumb--max {
     .handle__label {
       top: -14px;
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 96da01538f4..5b0fd0d06a6 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -16,6 +16,8 @@ import { guid } from "../../utils/guid";
 import { getKey } from "../../utils/key";
 import { DataSeries } from "../../interfaces/Graph";
 
+const Fragment = (props, children) => [...children];
+
 type activeSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue";
 type OutOfViewport = "left" | "right" | "none";
 
@@ -122,6 +124,270 @@ export class CalciteSlider {
     const left = `${this.getUnitInterval(min) * 100}%`;
     const right = `${100 - this.getUnitInterval(max) * 100}%`;
 
+    const minLabel = (
+      <Fragment>
+        <span
+          class={{
+            handle__label: true,
+            "handle__label--obscured-right":
+              this.minValueLabelObscured === "right" && true,
+            "handle__label--obscured-left":
+              this.minValueLabelObscured === "left" && true,
+          }}
+          aria-hidden="true"
+        >
+          {this.minValue}
+        </span>
+        <span
+          id="handle__label--minValue"
+          class="handle__label handle__label--invisible-copy"
+          aria-hidden="true"
+        >
+          {this.minValue}
+        </span>
+      </Fragment>
+    );
+
+    const label = (
+      <Fragment>
+        <span
+          class={{
+            handle__label: true,
+            "handle__label--obscured-right":
+              this.valueLabelObscured === "right" && true,
+            "handle__label--obscured-left":
+              this.valueLabelObscured === "left" && true,
+          }}
+          aria-hidden="true"
+        >
+          {this[maxProp]}
+        </span>
+        <span
+          id="handle__label--value"
+          class="handle__label handle__label--invisible-copy"
+          aria-hidden="true"
+        >
+          {this[maxProp]}
+        </span>
+      </Fragment>
+    );
+
+    const handle = (
+      <button
+        ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = maxProp)}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart(maxProp)}
+        onTouchStart={(e) => this.dragStart(maxProp, e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.isRange ? this.maxLabel : this.minLabel}
+        aria-valuenow={this[maxProp]}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ right }}
+        class={{
+          thumb: true,
+          "thumb--max": true,
+          "thumb--active":
+            this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
+        }}
+      >
+        <div class="handle"></div>
+      </button>
+    );
+
+    const labeledHandle = (
+      <button
+        ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = maxProp)}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart(maxProp)}
+        onTouchStart={(e) => this.dragStart(maxProp, e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.isRange ? this.maxLabel : this.minLabel}
+        aria-valuenow={this[maxProp]}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ right }}
+        class={{
+          thumb: true,
+          "thumb--max": true,
+          "thumb--active":
+            this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
+        }}
+      >
+        {label}
+        <div class="handle"></div>
+      </button>
+    );
+
+    const preciseHandle = (
+      <button
+        ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = maxProp)}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart(maxProp)}
+        onTouchStart={(e) => this.dragStart(maxProp, e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.isRange ? this.maxLabel : this.minLabel}
+        aria-valuenow={this[maxProp]}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ right }}
+        class={{
+          thumb: true,
+          "thumb--max": true,
+          "thumb--active":
+            this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
+          "thumb--precise": true,
+        }}
+      >
+        <div class="handle"></div>
+        <div class="handle-extension"></div>
+      </button>
+    );
+
+    const labeledPreciseHandle = (
+      <button
+        ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = maxProp)}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart(maxProp)}
+        onTouchStart={(e) => this.dragStart(maxProp, e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.isRange ? this.maxLabel : this.minLabel}
+        aria-valuenow={this[maxProp]}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ right }}
+        class={{
+          thumb: true,
+          "thumb--max": true,
+          "thumb--active":
+            this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
+          "thumb--precise": true,
+        }}
+      >
+        {label}
+        <div class="handle"></div>
+        <div class="handle-extension"></div>
+      </button>
+    );
+
+    const minHandle = (
+      <button
+        ref={(el) => (this.minHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = "minValue")}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart("minValue")}
+        onTouchStart={(e) => this.dragStart("minValue", e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.minLabel}
+        aria-valuenow={this.minValue}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ left }}
+        class={{
+          thumb: true,
+          "thumb--min": true,
+          "thumb--active": this.dragProp === "minValue",
+        }}
+      >
+        <div class="handle"></div>
+      </button>
+    );
+
+    const minLabeledHandle = (
+      <button
+        ref={(el) => (this.minHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = "minValue")}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart("minValue")}
+        onTouchStart={(e) => this.dragStart("minValue", e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.minLabel}
+        aria-valuenow={this.minValue}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ left }}
+        class={{
+          thumb: true,
+          "thumb--min": true,
+          "thumb--active": this.dragProp === "minValue",
+        }}
+      >
+        {minLabel}
+        <div class="handle"></div>
+      </button>
+    );
+
+    const minPreciseHandle = (
+      <button
+        ref={(el) => (this.minHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = "minValue")}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart("minValue")}
+        onTouchStart={(e) => this.dragStart("minValue", e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.minLabel}
+        aria-valuenow={this.minValue}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ left }}
+        class={{
+          thumb: true,
+          "thumb--min": true,
+          "thumb--active": this.dragProp === "minValue",
+          "thumb--precise": true,
+        }}
+      >
+        <div class="handle-extension"></div>
+        <div class="handle"></div>
+      </button>
+    );
+
+    const minLabeledPreciseHandle = (
+      <button
+        ref={(el) => (this.minHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = "minValue")}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart("minValue")}
+        onTouchStart={(e) => this.dragStart("minValue", e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.minLabel}
+        aria-valuenow={this.minValue}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ left }}
+        class={{
+          thumb: true,
+          "thumb--min": true,
+          "thumb--active": this.dragProp === "minValue",
+          "thumb--precise": true,
+        }}
+      >
+        <div class="handle-extension"></div>
+        <div class="handle"></div>
+        {label}
+      </button>
+    );
+
     return (
       <Host id={id} is-range={this.isRange}>
         {this.renderGraph()}
@@ -148,111 +414,21 @@ export class CalciteSlider {
             ))}
           </div>
         </div>
-        {this.isRange ? (
-          <button
-            ref={(el) => (this.minHandle = el as HTMLButtonElement)}
-            onFocus={() => (this.activeProp = "minValue")}
-            onBlur={() => (this.activeProp = null)}
-            onMouseDown={() => this.dragStart("minValue")}
-            onTouchStart={(e) => this.dragStart("minValue", e)}
-            role="slider"
-            aria-orientation="horizontal"
-            aria-label={this.minLabel}
-            aria-valuenow={this.minValue}
-            aria-valuemin={this.min}
-            aria-valuemax={this.max}
-            disabled={this.disabled}
-            style={{ left }}
-            class={{
-              thumb: true,
-              "thumb--min": true,
-              "thumb--active": this.dragProp === "minValue",
-              "thumb--precise": this.precise,
-            }}
-          >
-            {this.labelHandles ? (
-              <span
-                class={{
-                  handle__label: true,
-                  "handle__label--obscured-right":
-                    this.minValueLabelObscured === "right" && true,
-                  "handle__label--obscured-left":
-                    this.minValueLabelObscured === "left" && true,
-                }}
-                aria-hidden="true"
-              >
-                {this.minValue}
-              </span>
-            ) : (
-              ""
-            )}
-            {this.labelHandles ? (
-              <span
-                id="handle__label--minValue"
-                class="handle__label handle__label--invisible-copy"
-                aria-hidden="true"
-              >
-                {this.minValue}
-              </span>
-            ) : (
-              ""
-            )}
-            <span class="handle"></span>
-          </button>
-        ) : (
-          ""
-        )}
-        <button
-          ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
-          onFocus={() => (this.activeProp = maxProp)}
-          onBlur={() => (this.activeProp = null)}
-          onMouseDown={() => this.dragStart(maxProp)}
-          onTouchStart={(e) => this.dragStart(maxProp, e)}
-          role="slider"
-          aria-orientation="horizontal"
-          aria-label={this.isRange ? this.maxLabel : this.minLabel}
-          aria-valuenow={this[maxProp]}
-          aria-valuemin={this.min}
-          aria-valuemax={this.max}
-          disabled={this.disabled}
-          style={{ right }}
-          class={{
-            thumb: true,
-            "thumb--max": true,
-            "thumb--active":
-              this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-            "thumb--precise": this.precise,
-          }}
-        >
-          {this.labelHandles ? (
-            <span
-              class={{
-                handle__label: true,
-                "handle__label--obscured-right":
-                  this.valueLabelObscured === "right" && true,
-                "handle__label--obscured-left":
-                  this.valueLabelObscured === "left" && true,
-              }}
-              aria-hidden="true"
-            >
-              {this[maxProp]}
-            </span>
-          ) : (
-            ""
-          )}
-          {this.labelHandles ? (
-            <span
-              id="handle__label--value"
-              class="handle__label handle__label--invisible-copy"
-              aria-hidden="true"
-            >
-              {this[maxProp]}
-            </span>
-          ) : (
-            ""
-          )}
-          <span class="handle"></span>
-        </button>
+        {!this.precise && !this.labelHandles && this.isRange ? minHandle : null}
+        {!this.precise && this.labelHandles && this.isRange
+          ? minLabeledHandle
+          : null}
+        {this.precise && !this.labelHandles && this.isRange
+          ? minPreciseHandle
+          : null}
+        {this.precise && this.labelHandles && this.isRange
+          ? minLabeledPreciseHandle
+          : null}
+
+        {!this.precise && !this.labelHandles ? handle : null}
+        {!this.precise && this.labelHandles ? labeledHandle : null}
+        {this.precise && !this.labelHandles ? preciseHandle : null}
+        {this.precise && this.labelHandles ? labeledPreciseHandle : null}
       </Host>
     );
   }
@@ -617,21 +793,21 @@ export class CalciteSlider {
    * @param $div2
    * @returns {boolean}
    */
-  private isColliding(div1, div2) {
-    const d1_height = div1.offsetHeight;
-    const d1_width = div1.offsetWidth;
-    const d1_distance_from_top = div1.offsetTop + d1_height;
-    const d1_distance_from_left = div1.offsetLeft + d1_width;
+  private isColliding(element1, element2): boolean {
+    const element1_height = element1.offsetHeight;
+    const element1_width = element1.offsetWidth;
+    const element1_distance_from_top = element1.offsetTop + element1_height;
+    const element1_distance_from_left = element1.offsetLeft + element1_width;
 
-    const d2_height = div2.offsetHeight;
-    const d2_width = div2.offsetWidth;
-    const d2_distance_from_top = div2.offsetTop + d2_height;
-    const d2_distance_from_left = div2.offsetLeft + d2_width;
+    const element2_height = element2.offsetHeight;
+    const element2_width = element2.offsetWidth;
+    const element2_distance_from_top = element2.offsetTop + element2_height;
+    const element2_distance_from_left = element2.offsetLeft + element2_width;
     const not_colliding =
-      d1_distance_from_top < div2.offsetTop ||
-      div1.offsetTop > d2_distance_from_top ||
-      d1_distance_from_left < div2.offsetTop ||
-      div1.offsetLeft > d2_distance_from_left;
+      element1_distance_from_top < element2.offsetTop ||
+      element1.offsetTop > element2_distance_from_top ||
+      element1_distance_from_left < element2.offsetTop ||
+      element1.offsetLeft > element2_distance_from_left;
 
     return !not_colliding;
   }
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 5c41e2fc5c6..c8818332182 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -31,12 +31,12 @@ <h2>Single Value</h2>
   <h3>Handle</h3>
   <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature"></calcite-slider>
 
-  <h3>Precise Handle</h3>
-  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise></calcite-slider>
-
   <h3>Labeled Handle</h3>
   <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" label-handles></calcite-slider>
 
+  <h3>Precise Handle</h3>
+  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise></calcite-slider>
+
   <h3>Precise Labeled Handle</h3>
   <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise label-handles></calcite-slider>
 
@@ -83,9 +83,9 @@ <h3>Precise Handle with Labeled Ticks</h3>
   <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise label-ticks></calcite-slider>
 
   <h3>Precise Labeled Handle with Labeled Ticks</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise label-handles label-ticks></calcite-slider>
+  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="10000" ticks="10000" label="Temperature" precise label-handles label-ticks></calcite-slider>
 
-  <div style="max-width: 400px">
+  <!-- <div style="max-width: 400px">
 
     <h3>Histogram</h3>
     <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
@@ -136,7 +136,7 @@ <h3>Event Listener</h3>
     [].slice.call(document.querySelectorAll(".js-histogram")).forEach(function (graphElement) {
       graphElement.histogram = histogram;
     });
-  </script>
+  </script> -->
 </body>
 
 </html>

From a9b968dc93b3409da905686992bf40207477d711 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 29 May 2020 14:24:33 -0700
Subject: [PATCH 18/52] refactor fixes: handle and labeled handle

---
 .../calcite-slider/calcite-slider.scss         | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 1f6372c3225..0bc3281cfff 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -52,9 +52,10 @@ $tick-height: 4px;
   z-index: 2;
   outline: none;
   padding: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  grid-gap: 5px;
+  justify-items: center;
+  transform: translate(7px, -8px);
 
   .handle {
     @include focus-style-base();
@@ -62,7 +63,7 @@ $tick-height: 4px;
     width: $handle-size;
     box-sizing: border-box;
     border-radius: 100%;
-    background-color: var(--calcite-ui-foreground-1);
+    // background-color: var(--calcite-ui-foreground-1);
     box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
     transition: border 0.25s ease, background-color 0.25s ease,
       box-shadow 0.25s ease;
@@ -85,6 +86,11 @@ $tick-height: 4px;
     outline-offset: 6px;
   }
 }
+:host([label-handles]) {
+  .thumb {
+    transform: translate(49%, -26px);
+  }
+}
 
 .handle__label {
   transition: transform 150ms;
@@ -93,10 +99,10 @@ $tick-height: 4px;
   line-height: 1;
   color: var(--calcite-ui-text-3);
   &--obscured-right {
-    transform: translate(calc(-100% + 7px), -50%);
+    transform: translateX(-25%);
   }
   &--obscured-left {
-    transform: translate(-7px, -50%);
+    transform: translateX(25%);
   }
   &--invisible-copy {
     opacity: 0;

From 55cd59a56ed502bbf57772c86e9bb416353b3d0c Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 29 May 2020 17:18:53 -0700
Subject: [PATCH 19/52] refactor: removed need to track handle labels in state.
  Transforming the position is now just a side effect that happens directly on
 the label element in componentDidRender.

---
 .../calcite-slider/calcite-slider.scss        | 45 ++++----------
 .../calcite-slider/calcite-slider.tsx         | 60 +++++++------------
 src/demos/calcite-slider.html                 |  2 +-
 3 files changed, 35 insertions(+), 72 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 0bc3281cfff..2cfec5b2540 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -91,6 +91,17 @@ $tick-height: 4px;
     transform: translate(49%, -26px);
   }
 }
+:host([precise]) {
+  .thumb {
+    grid-gap: 0;
+    transform: translate(7px, -21px);
+  }
+}
+:host([precise][label-handles]) {
+  .thumb {
+    transform: translate(49%, -34px);
+  }
+}
 
 .handle__label {
   transition: transform 150ms;
@@ -98,13 +109,7 @@ $tick-height: 4px;
   font-weight: 500;
   line-height: 1;
   color: var(--calcite-ui-text-3);
-  &--obscured-right {
-    transform: translateX(-25%);
-  }
-  &--obscured-left {
-    transform: translateX(25%);
-  }
-  &--invisible-copy {
+  &.copy {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -120,32 +125,6 @@ $tick-height: 4px;
   }
 }
 
-.thumb--precise {
-  &:after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: $handle-size;
-    left: 50%;
-    width: 2px;
-    height: $thumb-padding;
-    background-color: var(--calcite-ui-text-3);
-    margin-left: -1px;
-    z-index: 1;
-  }
-  &.thumb--max {
-    .handle__label {
-      top: -14px;
-    }
-    .handle {
-      top: -5px;
-    }
-    &:after {
-      top: 2px;
-    }
-  }
-}
-
 .thumb:hover.thumb--precise:after,
 .thumb:focus.thumb--precise:after,
 .thumb--active.thumb--precise:after {
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 5b0fd0d06a6..287ad9037a2 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -19,7 +19,6 @@ import { DataSeries } from "../../interfaces/Graph";
 const Fragment = (props, children) => [...children];
 
 type activeSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue";
-type OutOfViewport = "left" | "right" | "none";
 
 @Component({
   tag: "calcite-slider",
@@ -126,21 +125,11 @@ export class CalciteSlider {
 
     const minLabel = (
       <Fragment>
-        <span
-          class={{
-            handle__label: true,
-            "handle__label--obscured-right":
-              this.minValueLabelObscured === "right" && true,
-            "handle__label--obscured-left":
-              this.minValueLabelObscured === "left" && true,
-          }}
-          aria-hidden="true"
-        >
+        <span class="handle__label handle__label--minValue" aria-hidden="true">
           {this.minValue}
         </span>
         <span
-          id="handle__label--minValue"
-          class="handle__label handle__label--invisible-copy"
+          class="handle__label handle__label--minValue copy"
           aria-hidden="true"
         >
           {this.minValue}
@@ -150,21 +139,11 @@ export class CalciteSlider {
 
     const label = (
       <Fragment>
-        <span
-          class={{
-            handle__label: true,
-            "handle__label--obscured-right":
-              this.valueLabelObscured === "right" && true,
-            "handle__label--obscured-left":
-              this.valueLabelObscured === "left" && true,
-          }}
-          aria-hidden="true"
-        >
+        <span class="handle__label handle__label--value" aria-hidden="true">
           {this[maxProp]}
         </span>
         <span
-          id="handle__label--value"
-          class="handle__label handle__label--invisible-copy"
+          class="handle__label handle__label--value copy"
           aria-hidden="true"
         >
           {this[maxProp]}
@@ -616,10 +595,6 @@ export class CalciteSlider {
   /** @internal */
   @State() private maxValueDragRange: number = null;
   /** @internal */
-  @State() private valueLabelObscured: OutOfViewport = "none";
-  /** @internal */
-  @State() private minValueLabelObscured: OutOfViewport = "none";
-  /** @internal */
   @State() private minTickLabelObscured: boolean = false;
   /** @internal */
   @State() private maxTickLabelObscured: boolean = false;
@@ -755,33 +730,42 @@ export class CalciteSlider {
   private isHandleLabelObscured(name: "value" | "minValue") {
     if (this.labelHandles) {
       const element = this.el.shadowRoot.querySelector(
-        `#handle__label--${name}`
+        `.handle__label--${name}`
+      );
+      const elementCopy = this.el.shadowRoot.querySelector(
+        `.handle__label--${name}.copy`
       );
-      if (element) {
-        this[`${name}LabelObscured`] = this.isOutOfViewport(
-          element as HTMLElement
+      if (element && elementCopy) {
+        const isOutOfViewport = this.isOutOfViewport(
+          elementCopy as HTMLElement
         );
+        if (isOutOfViewport) {
+          (element as HTMLElement).style.transform = `translateX(${isOutOfViewport}px)`;
+        } else {
+          (element as HTMLElement).style.transform = "";
+        }
       }
     }
   }
   /**
    * Checks if an element is out of the viewport on either the left or right side
    * @link https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
-   * @return {string} "left", "right" or "none"
    * @internal
    */
-  private isOutOfViewport(element: HTMLElement): OutOfViewport {
+  private isOutOfViewport(element: HTMLElement): number {
     const bounding = element.getBoundingClientRect();
     if (bounding.left < 0) {
-      return "left";
+      const offset = Math.abs(bounding.left);
+      return offset;
     }
     if (
       bounding.right >
       (window.innerWidth || document.documentElement.clientWidth)
     ) {
-      return "right";
+      const offset = Math.floor(-(bounding.right - window.innerWidth + 1));
+      return offset;
     }
-    return "none";
+    return 0;
   }
   /**
    * Detects if two elements are colliding
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index c8818332182..38bb97837aa 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -32,7 +32,7 @@ <h3>Handle</h3>
   <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature"></calcite-slider>
 
   <h3>Labeled Handle</h3>
-  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" label-handles></calcite-slider>
+  <calcite-slider min="100" max="1000" value="1000" step="10" label="Temperature" label-handles></calcite-slider>
 
   <h3>Precise Handle</h3>
   <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise></calcite-slider>

From bdbdbd3c4369080ef01e7ba062193546a08824e7 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Mon, 1 Jun 2020 12:24:28 -0700
Subject: [PATCH 20/52] fix: moving to flex display since labels need to have a
 margin but the extension doesn't.  Also extending extension when ticks are
 used.

---
 .../calcite-slider/calcite-slider.scss        | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 2cfec5b2540..70027ba64b0 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -52,9 +52,9 @@ $tick-height: 4px;
   z-index: 2;
   outline: none;
   padding: 0;
-  display: grid;
-  grid-gap: 5px;
-  justify-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   transform: translate(7px, -8px);
 
   .handle {
@@ -79,27 +79,39 @@ $tick-height: 4px;
     .handle {
       box-shadow: 0 0 0 3px var(--calcite-ui-blue-1) inset;
     }
+    .handle-extension {
+      background-color: var(--calcite-ui-blue-1);
+    }
   }
 
-  &:focus .handle {
-    @include focus-style-outset();
-    outline-offset: 6px;
+  &:focus {
+    .handle {
+      @include focus-style-outset();
+      outline-offset: 6px;
+    }
+    .handle-extension {
+      background-color: var(--calcite-ui-blue-1);
+    }
   }
 }
 :host([label-handles]) {
   .thumb {
-    transform: translate(49%, -26px);
+    transform: translate(50%, -26px);
   }
 }
 :host([precise]) {
   .thumb {
-    grid-gap: 0;
     transform: translate(7px, -21px);
   }
 }
 :host([precise][label-handles]) {
   .thumb {
-    transform: translate(49%, -34px);
+    transform: translate(50%, -39px);
+  }
+}
+:host([precise][label-ticks]) {
+  .handle-extension {
+    height: 8px;
   }
 }
 
@@ -109,6 +121,7 @@ $tick-height: 4px;
   font-weight: 500;
   line-height: 1;
   color: var(--calcite-ui-text-3);
+  margin-bottom: 5px;
   &.copy {
     opacity: 0;
     position: absolute;

From 69f3a8eb8bd5267738b16549b1f0ea077bad8f52 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Mon, 1 Jun 2020 16:16:54 -0700
Subject: [PATCH 21/52] fix: range button positions

---
 .../calcite-slider/calcite-slider.scss        | 46 +++++++++++++------
 .../calcite-slider/calcite-slider.tsx         |  2 +-
 src/demos/calcite-slider.html                 |  4 +-
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 70027ba64b0..9b46d8c1cf4 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -57,13 +57,27 @@ $tick-height: 4px;
   align-items: center;
   transform: translate(7px, -8px);
 
+  .handle__label {
+    transition: transform 150ms;
+    @include font-size(-3);
+    font-weight: 500;
+    line-height: 1;
+    color: var(--calcite-ui-text-3);
+    margin-bottom: 5px;
+    &.copy {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+    }
+  }
+
   .handle {
     @include focus-style-base();
     height: $handle-size;
     width: $handle-size;
     box-sizing: border-box;
     border-radius: 100%;
-    // background-color: var(--calcite-ui-foreground-1);
+    background-color: var(--calcite-ui-foreground-1);
     box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
     transition: border 0.25s ease, background-color 0.25s ease,
       box-shadow 0.25s ease;
@@ -94,20 +108,36 @@ $tick-height: 4px;
     }
   }
 }
+.thumb--min {
+  transform: translate(-7px, -8px);
+  .handle__label {
+    margin-bottom: unset;
+    margin-top: 5px;
+  }
+}
 :host([label-handles]) {
   .thumb {
     transform: translate(50%, -26px);
   }
+  .thumb--min {
+    transform: translate(-50%, -26px);
+  }
 }
 :host([precise]) {
   .thumb {
     transform: translate(7px, -21px);
   }
+  .thumb--min {
+    transform: translate(-7px, -3px);
+  }
 }
 :host([precise][label-handles]) {
   .thumb {
     transform: translate(50%, -39px);
   }
+  .thumb--min {
+    transform: translate(-50%, -2px);
+  }
 }
 :host([precise][label-ticks]) {
   .handle-extension {
@@ -115,20 +145,6 @@ $tick-height: 4px;
   }
 }
 
-.handle__label {
-  transition: transform 150ms;
-  @include font-size(-3);
-  font-weight: 500;
-  line-height: 1;
-  color: var(--calcite-ui-text-3);
-  margin-bottom: 5px;
-  &.copy {
-    opacity: 0;
-    position: absolute;
-    top: 0;
-  }
-}
-
 .thumb:focus,
 .thumb--active {
   z-index: 3;
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 287ad9037a2..b491da4d09e 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -363,7 +363,7 @@ export class CalciteSlider {
       >
         <div class="handle-extension"></div>
         <div class="handle"></div>
-        {label}
+        {minLabel}
       </button>
     );
 
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 38bb97837aa..05f6d8a4963 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -85,7 +85,7 @@ <h3>Precise Handle with Labeled Ticks</h3>
   <h3>Precise Labeled Handle with Labeled Ticks</h3>
   <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="10000" ticks="10000" label="Temperature" precise label-handles label-ticks></calcite-slider>
 
-  <!-- <div style="max-width: 400px">
+  <div style="max-width: 400px">
 
     <h3>Histogram</h3>
     <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
@@ -136,7 +136,7 @@ <h3>Event Listener</h3>
     [].slice.call(document.querySelectorAll(".js-histogram")).forEach(function (graphElement) {
       graphElement.histogram = histogram;
     });
-  </script> -->
+  </script>
 </body>
 
 </html>

From 3cd1a377539af7602a04d7bb15012509fa5c801b Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Mon, 1 Jun 2020 16:37:12 -0700
Subject: [PATCH 22/52] fixing a couple css bugs

---
 .../calcite-slider/calcite-slider.scss        | 25 +++++++++++++------
 src/demos/calcite-slider.html                 |  3 +++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 9b46d8c1cf4..102800a6317 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -110,10 +110,6 @@ $tick-height: 4px;
 }
 .thumb--min {
   transform: translate(-7px, -8px);
-  .handle__label {
-    margin-bottom: unset;
-    margin-top: 5px;
-  }
 }
 :host([label-handles]) {
   .thumb {
@@ -127,6 +123,18 @@ $tick-height: 4px;
   .thumb {
     transform: translate(7px, -21px);
   }
+  .thumb--min {
+    transform: translate(-7px, -2px);
+    .handle__label {
+      margin-bottom: unset;
+      margin-top: 5px;
+    }
+  }
+}
+:host([precise][ticks]) {
+  .thumb {
+    transform: translate(7px, -20px);
+  }
   .thumb--min {
     transform: translate(-7px, -3px);
   }
@@ -139,9 +147,12 @@ $tick-height: 4px;
     transform: translate(-50%, -2px);
   }
 }
-:host([precise][label-ticks]) {
-  .handle-extension {
-    height: 8px;
+:host([precise][ticks][label-handles]) {
+  .thumb {
+    transform: translate(50%, -38px);
+  }
+  .thumb--min {
+    transform: translate(-50%, -3px);
   }
 }
 
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 05f6d8a4963..e48a5c30b68 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -76,6 +76,9 @@ <h3>Precise Labeled Handles</h3>
   <h3>Handles with Ticks</h3>
   <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature"></calcite-slider>
 
+  <h3>Precise Handles with Ticks</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise></calcite-slider>
+
   <h3>Handles with Labeled Ticks</h3>
   <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-ticks></calcite-slider>
 

From 66bf0e5c5d274364ff7dcc47ef3f8888c2e6dc81 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Mon, 1 Jun 2020 17:25:00 -0700
Subject: [PATCH 23/52] Removing static JSX that was causing stencil warnings

---
 .../calcite-slider/calcite-slider.tsx         | 73 +++++++++----------
 1 file changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index b491da4d09e..c0723ddf26d 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -16,8 +16,6 @@ import { guid } from "../../utils/guid";
 import { getKey } from "../../utils/key";
 import { DataSeries } from "../../interfaces/Graph";
 
-const Fragment = (props, children) => [...children];
-
 type activeSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue";
 
 @Component({
@@ -103,14 +101,11 @@ export class CalciteSlider {
         const minValueButton = this.el.shadowRoot.querySelector(
           "button.thumb--min"
         );
-        console.log(minValueButton);
         const minTickLabel = this.el.shadowRoot.querySelector(
           ".tick__label--min"
         );
-        console.log(minTickLabel);
         const isMinColliding = this.isColliding(minValueButton, minTickLabel);
         this.minTickLabelObscured = isMinColliding ? true : false;
-        console.log(`isMinColliding:${isMinColliding}`);
       }
     }
   }
@@ -123,34 +118,6 @@ export class CalciteSlider {
     const left = `${this.getUnitInterval(min) * 100}%`;
     const right = `${100 - this.getUnitInterval(max) * 100}%`;
 
-    const minLabel = (
-      <Fragment>
-        <span class="handle__label handle__label--minValue" aria-hidden="true">
-          {this.minValue}
-        </span>
-        <span
-          class="handle__label handle__label--minValue copy"
-          aria-hidden="true"
-        >
-          {this.minValue}
-        </span>
-      </Fragment>
-    );
-
-    const label = (
-      <Fragment>
-        <span class="handle__label handle__label--value" aria-hidden="true">
-          {this[maxProp]}
-        </span>
-        <span
-          class="handle__label handle__label--value copy"
-          aria-hidden="true"
-        >
-          {this[maxProp]}
-        </span>
-      </Fragment>
-    );
-
     const handle = (
       <button
         ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
@@ -199,7 +166,15 @@ export class CalciteSlider {
             this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         }}
       >
-        {label}
+        <span class="handle__label handle__label--value" aria-hidden="true">
+          {this[maxProp]}
+        </span>
+        <span
+          class="handle__label handle__label--value copy"
+          aria-hidden="true"
+        >
+          {this[maxProp]}
+        </span>
         <div class="handle"></div>
       </button>
     );
@@ -255,7 +230,15 @@ export class CalciteSlider {
           "thumb--precise": true,
         }}
       >
-        {label}
+        <span class="handle__label handle__label--value" aria-hidden="true">
+          {this[maxProp]}
+        </span>
+        <span
+          class="handle__label handle__label--value copy"
+          aria-hidden="true"
+        >
+          {this[maxProp]}
+        </span>
         <div class="handle"></div>
         <div class="handle-extension"></div>
       </button>
@@ -307,7 +290,15 @@ export class CalciteSlider {
           "thumb--active": this.dragProp === "minValue",
         }}
       >
-        {minLabel}
+        <span class="handle__label handle__label--minValue" aria-hidden="true">
+          {this.minValue}
+        </span>
+        <span
+          class="handle__label handle__label--minValue copy"
+          aria-hidden="true"
+        >
+          {this.minValue}
+        </span>
         <div class="handle"></div>
       </button>
     );
@@ -363,7 +354,15 @@ export class CalciteSlider {
       >
         <div class="handle-extension"></div>
         <div class="handle"></div>
-        {minLabel}
+        <span class="handle__label handle__label--minValue" aria-hidden="true">
+          {this.minValue}
+        </span>
+        <span
+          class="handle__label handle__label--minValue copy"
+          aria-hidden="true"
+        >
+          {this.minValue}
+        </span>
       </button>
     );
 

From bdcaa3db16e36a3024895bde1aecae19e7036459 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Tue, 2 Jun 2020 15:48:19 -0700
Subject: [PATCH 24/52] feat: hiding bounding track labels for precise handles
 with ticks when handles overlap them

---
 .../calcite-slider/calcite-slider.tsx         | 91 +++++++++----------
 src/demos/calcite-slider.html                 |  8 +-
 2 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index c0723ddf26d..1bbc7f21f1f 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -94,18 +94,11 @@ export class CalciteSlider {
   }
 
   componentDidRender() {
-    this.isHandleLabelObscured("value");
+    this.adjustObscuredHandleLabel("value");
     if (this.isRange) {
-      this.isHandleLabelObscured("minValue");
+      this.adjustObscuredHandleLabel("minValue");
       if (this.precise && this.labelTicks) {
-        const minValueButton = this.el.shadowRoot.querySelector(
-          "button.thumb--min"
-        );
-        const minTickLabel = this.el.shadowRoot.querySelector(
-          ".tick__label--min"
-        );
-        const isMinColliding = this.isColliding(minValueButton, minTickLabel);
-        this.minTickLabelObscured = isMinColliding ? true : false;
+        this.hideBoundingTrackLabels();
       }
     }
   }
@@ -428,11 +421,6 @@ export class CalciteSlider {
   private renderTickLabel(tick: number): VNode {
     const isMinTickLabel = tick === this.min;
     const isMaxTickLabel = tick === this.max;
-    const isObscured =
-      (isMinTickLabel && this.minTickLabelObscured) ||
-      (isMaxTickLabel && this.maxTickLabelObscured)
-        ? true
-        : false;
     const tickLabel = (
       <span
         class={{
@@ -440,7 +428,6 @@ export class CalciteSlider {
           "tick__label--min": isMinTickLabel,
           "tick__label--max": isMaxTickLabel,
         }}
-        style={{ opacity: isObscured ? "0" : "1" }}
       >
         {tick}
       </span>
@@ -593,10 +580,6 @@ export class CalciteSlider {
   @State() private minValueDragRange: number = null;
   /** @internal */
   @State() private maxValueDragRange: number = null;
-  /** @internal */
-  @State() private minTickLabelObscured: boolean = false;
-  /** @internal */
-  @State() private maxTickLabelObscured: boolean = false;
 
   //--------------------------------------------------------------------------
   //
@@ -726,7 +709,7 @@ export class CalciteSlider {
     const range = this.max - this.min;
     return (num - this.min) / range;
   }
-  private isHandleLabelObscured(name: "value" | "minValue") {
+  private adjustObscuredHandleLabel(name: "value" | "minValue") {
     if (this.labelHandles) {
       const element = this.el.shadowRoot.querySelector(
         `.handle__label--${name}`
@@ -746,6 +729,32 @@ export class CalciteSlider {
       }
     }
   }
+  private hideBoundingTrackLabels() {
+    const minHandle = this.el.shadowRoot.querySelector(".thumb--min");
+    const minTickLabel = this.el.shadowRoot.querySelector(".tick__label--min");
+    const maxTickLabel = this.el.shadowRoot.querySelector(".tick__label--max");
+
+    if (
+      this.isMinBoundingLabelObscured(
+        (minTickLabel as HTMLElement).offsetParent,
+        minHandle
+      )
+    ) {
+      (minTickLabel as HTMLSpanElement).style.opacity = "0";
+    } else {
+      (minTickLabel as HTMLSpanElement).style.opacity = "1";
+    }
+    if (
+      this.isMaxBoundingLabelObscured(
+        (maxTickLabel as HTMLElement).offsetParent,
+        minHandle
+      )
+    ) {
+      (maxTickLabel as HTMLSpanElement).style.opacity = "0";
+    } else {
+      (maxTickLabel as HTMLSpanElement).style.opacity = "1";
+    }
+  }
   /**
    * Checks if an element is out of the viewport on either the left or right side
    * @link https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
@@ -766,32 +775,22 @@ export class CalciteSlider {
     }
     return 0;
   }
-  /**
-   * Detects if two elements are colliding
-   *
-   * Credit goes to BC on Stack Overflow, cleaned up a little bit
-   *
-   * @link http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery
-   * @param $div1
-   * @param $div2
-   * @returns {boolean}
-   */
-  private isColliding(element1, element2): boolean {
-    const element1_height = element1.offsetHeight;
-    const element1_width = element1.offsetWidth;
-    const element1_distance_from_top = element1.offsetTop + element1_height;
-    const element1_distance_from_left = element1.offsetLeft + element1_width;
 
-    const element2_height = element2.offsetHeight;
-    const element2_width = element2.offsetWidth;
-    const element2_distance_from_top = element2.offsetTop + element2_height;
-    const element2_distance_from_left = element2.offsetLeft + element2_width;
-    const not_colliding =
-      element1_distance_from_top < element2.offsetTop ||
-      element1.offsetTop > element2_distance_from_top ||
-      element1_distance_from_left < element2.offsetTop ||
-      element1.offsetLeft > element2_distance_from_left;
+  private isMinBoundingLabelObscured(minLabel, handle) {
+    const minLabelRight = minLabel.offsetLeft + minLabel.offsetWidth;
+    const handleLeft = handle.offsetLeft;
+    if (handleLeft < minLabelRight) {
+      return true;
+    }
+    return false;
+  }
 
-    return !not_colliding;
+  private isMaxBoundingLabelObscured(maxLabel, handle) {
+    const maxLabelLeft = maxLabel.offsetLeft;
+    const handleRight = handle.offsetLeft + handle.offsetWidth;
+    if (handleRight > maxLabelLeft) {
+      return true;
+    }
+    return false;
   }
 }
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index e48a5c30b68..fbdef2a7742 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -23,7 +23,7 @@
 </head>
 
 <body>
-  <calcite-button href="/">Home</calcite-button>
+  <!-- <calcite-button href="/">Home</calcite-button>
   <h1>Calcite Slider</h1>
 
   <h2>Single Value</h2>
@@ -83,12 +83,12 @@ <h3>Handles with Labeled Ticks</h3>
   <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-ticks></calcite-slider>
 
   <h3>Precise Handle with Labeled Ticks</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise label-ticks></calcite-slider>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise label-ticks></calcite-slider> -->
 
   <h3>Precise Labeled Handle with Labeled Ticks</h3>
   <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="10000" ticks="10000" label="Temperature" precise label-handles label-ticks></calcite-slider>
 
-  <div style="max-width: 400px">
+  <!-- <div style="max-width: 400px">
 
     <h3>Histogram</h3>
     <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
@@ -139,7 +139,7 @@ <h3>Event Listener</h3>
     [].slice.call(document.querySelectorAll(".js-histogram")).forEach(function (graphElement) {
       graphElement.histogram = histogram;
     });
-  </script>
+  </script> -->
 </body>
 
 </html>

From bc7bd83eaeb3bb8432002446325f0340394e5fed Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Tue, 2 Jun 2020 17:09:44 -0700
Subject: [PATCH 25/52] adding all histogram permutations

---
 src/demos/calcite-slider.html | 128 ++++++++++++++++++++++++++--------
 1 file changed, 100 insertions(+), 28 deletions(-)

diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index fbdef2a7742..91d626a89ca 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -12,6 +12,7 @@
       color: white;
       padding: 1rem;
     }
+
     h3 {
       margin-top: 24px;
     }
@@ -23,7 +24,7 @@
 </head>
 
 <body>
-  <!-- <calcite-button href="/">Home</calcite-button>
+  <calcite-button href="/">Home</calcite-button>
   <h1>Calcite Slider</h1>
 
   <h2>Single Value</h2>
@@ -38,32 +39,66 @@ <h3>Precise Handle</h3>
   <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise></calcite-slider>
 
   <h3>Precise Labeled Handle</h3>
-  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise label-handles></calcite-slider>
+  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise label-handles>
+  </calcite-slider>
 
-  <h3>Handle with Ticks</h3>
+  <h3>Ticks</h3>
   <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label="Temperature"></calcite-slider>
 
-  <h3>Handle with Labeled Ticks</h3>
+  <h3>Labeled Ticks</h3>
   <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks label="Temperature"></calcite-slider>
 
-  <h3>Precise Handle with Labeled Ticks</h3>
-  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks precise label="Temperature"></calcite-slider>
+  <h3>Labeled Ticks with Precise Handle</h3>
+  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks precise label="Temperature">
+  </calcite-slider>
 
-  <h3>Precise Labeled Handle with Labeled Ticks</h3>
-  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-handles label-ticks precise label="Temperature"></calcite-slider>
+  <h3>Labeled Ticks with Precise Labeled Handle</h3>
+  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-handles label-ticks precise
+    label="Temperature"></calcite-slider>
 
   <h3>Disabled</h3>
   <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled></calcite-slider>
 
+  <div style="max-width: 400px">
+    <h3>Histogram</h3>
+    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
+
+    <h3>Histogram Labeled Handle</h3>
+    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" label-handles></calcite-slider>
+
+    <h3>Histogram Precise Handle</h3>
+    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" precise></calcite-slider>
+
+    <h3>Histogram Precise Labeled Handle</h3>
+    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" label-handles precise></calcite-slider>
+
+    <h3>Histogram Ticks</h3>
+    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10"></calcite-slider>
+
+    <h3>Histogram Labeled Ticks</h3>
+    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-ticks></calcite-slider>
+
+    <h3>Histogram Labeled Ticks with Precise Handle</h3>
+    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-ticks precise>
+    </calcite-slider>
+
+    <h3>Histogram Labeled Ticks with Precise Labeled Handle</h3>
+    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles label-ticks
+      precise></calcite-slider>
+
+    <h3>Histogram Disabled</h3>
+    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" disabled></calcite-slider>
+  </div>
+
   <h2>Range</h2>
 
   <h3>Handles</h3>
-  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1" min-label="Temperature range (lower)"
-    max-label="Temperature range (upper)"></calcite-slider>
+  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+    min-label="Temperature range (lower)" max-label="Temperature range (upper)"></calcite-slider>
 
   <h3>Labeled Handles</h3>
-  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1" min-label="Temperature range (lower)"
-    max-label="Temperature range (upper)" label-handles></calcite-slider>
+  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+    min-label="Temperature range (lower)" max-label="Temperature range (upper)" label-handles></calcite-slider>
 
   <h3>Precise Handles</h3>
   <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
@@ -73,30 +108,67 @@ <h3>Precise Labeled Handles</h3>
   <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
     min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise label-handles></calcite-slider>
 
-  <h3>Handles with Ticks</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature"></calcite-slider>
+  <h3>Ticks</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature">
+  </calcite-slider>
 
-  <h3>Precise Handles with Ticks</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise></calcite-slider>
+  <h3>Ticks with Precise Handles</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise>
+  </calcite-slider>
 
-  <h3>Handles with Labeled Ticks</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-ticks></calcite-slider>
+  <h3>Labeled Ticks</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-ticks>
+  </calcite-slider>
 
-  <h3>Precise Handle with Labeled Ticks</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise label-ticks></calcite-slider> -->
+  <h3>Labeled Ticks with Precise Handles</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise
+    label-ticks></calcite-slider>
 
-  <h3>Precise Labeled Handle with Labeled Ticks</h3>
-  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="10000" ticks="10000" label="Temperature" precise label-handles label-ticks></calcite-slider>
+  <h3>Labeled Ticks with Precise Labeled Handles</h3>
+  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="10000" ticks="10000"
+    label="Temperature" precise label-handles label-ticks></calcite-slider>
 
-  <!-- <div style="max-width: 400px">
+  <div style="max-width: 400px">
 
     <h3>Histogram</h3>
-    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
-
-    <h3>Histogram Range</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
       max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
 
+    <h3>Histogram Labeled Handles</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+      max-label="Temperature range (upper)" class="js-histogram" label-handles></calcite-slider>
+
+    <h3>Histogram Precise Handles</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+      max-label="Temperature range (upper)" class="js-histogram" precise></calcite-slider>
+
+    <h3>Histogram Precise Labeled Handles</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+      max-label="Temperature range (upper)" class="js-histogram" precise label-handles></calcite-slider>
+
+    <h3>Histogram Ticks</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
+
+    <h3>Histogram Ticks with Precise Handles</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" precise>
+    </calcite-slider>
+
+    <h3>Histogram Labeled Ticks</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-ticks>
+    </calcite-slider>
+
+    <h3>Histogram Labeled Ticks with Precise Handles</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-ticks precise>
+    </calcite-slider>
+
+    <h3>Histogram Labeled Ticks with Precise Labeled Handles</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles label-ticks precise>
+    </calcite-slider>
   </div>
 
   <div class="demo-background-dark" theme="dark">
@@ -139,7 +211,7 @@ <h3>Event Listener</h3>
     [].slice.call(document.querySelectorAll(".js-histogram")).forEach(function (graphElement) {
       graphElement.histogram = histogram;
     });
-  </script> -->
+  </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file

From ec9e37b8f7246f2bbbcd7df54cd466509177d703 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Wed, 3 Jun 2020 16:07:13 -0700
Subject: [PATCH 26/52] feat: moving labeled range handles both to the bottom
 when using a histogram

---
 .../calcite-slider/calcite-slider.scss        |  12 ++
 .../calcite-slider/calcite-slider.tsx         | 133 ++++++++++++++----
 2 files changed, 120 insertions(+), 25 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 102800a6317..866d4e1491b 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -155,6 +155,18 @@ $tick-height: 4px;
     transform: translate(-50%, -3px);
   }
 }
+:host([has-histogram][precise][label-handles][is-range]) {
+  .thumb {
+    transform: translate(50%, -2px);
+    .handle__label {
+      margin-bottom: unset;
+      margin-top: 5px;
+    }
+  }
+  .thumb--min {
+    transform: translate(-50%, -2px);
+  }
+}
 
 .thumb:focus,
 .thumb--active {
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 1bbc7f21f1f..60b7ef423fa 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -98,7 +98,10 @@ export class CalciteSlider {
     if (this.isRange) {
       this.adjustObscuredHandleLabel("minValue");
       if (this.precise && this.labelTicks) {
-        this.hideBoundingTrackLabels();
+        this.hideObscuredBoundingTrackLabels("min");
+        if (this.hasHistogram && this.labelHandles) {
+          this.hideObscuredBoundingTrackLabels("both");
+        }
       }
     }
   }
@@ -237,6 +240,43 @@ export class CalciteSlider {
       </button>
     );
 
+    const histogramLabeledPreciseHandle = (
+      <button
+        ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = maxProp)}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart(maxProp)}
+        onTouchStart={(e) => this.dragStart(maxProp, e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.isRange ? this.maxLabel : this.minLabel}
+        aria-valuenow={this[maxProp]}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ right }}
+        class={{
+          thumb: true,
+          "thumb--max": true,
+          "thumb--active":
+            this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
+          "thumb--precise": true,
+        }}
+      >
+        <div class="handle-extension"></div>
+        <div class="handle"></div>
+        <span class="handle__label handle__label--value" aria-hidden="true">
+          {this[maxProp]}
+        </span>
+        <span
+          class="handle__label handle__label--value copy"
+          aria-hidden="true"
+        >
+          {this[maxProp]}
+        </span>
+      </button>
+    );
+
     const minHandle = (
       <button
         ref={(el) => (this.minHandle = el as HTMLButtonElement)}
@@ -399,7 +439,15 @@ export class CalciteSlider {
         {!this.precise && !this.labelHandles ? handle : null}
         {!this.precise && this.labelHandles ? labeledHandle : null}
         {this.precise && !this.labelHandles ? preciseHandle : null}
-        {this.precise && this.labelHandles ? labeledPreciseHandle : null}
+        {!this.hasHistogram && this.precise && this.labelHandles
+          ? labeledPreciseHandle
+          : null}
+        {this.hasHistogram && this.precise && this.labelHandles && !this.isRange
+          ? labeledPreciseHandle
+          : null}
+        {this.hasHistogram && this.precise && this.labelHandles && this.isRange
+          ? histogramLabeledPreciseHandle
+          : null}
       </Host>
     );
   }
@@ -729,35 +777,70 @@ export class CalciteSlider {
       }
     }
   }
-  private hideBoundingTrackLabels() {
-    const minHandle = this.el.shadowRoot.querySelector(".thumb--min");
+  private hideObscuredBoundingTrackLabels(whichHandles: "min" | "both") {
+    const minHandle = this.el.shadowRoot.querySelector(`.thumb--min`);
     const minTickLabel = this.el.shadowRoot.querySelector(".tick__label--min");
     const maxTickLabel = this.el.shadowRoot.querySelector(".tick__label--max");
-
-    if (
-      this.isMinBoundingLabelObscured(
-        (minTickLabel as HTMLElement).offsetParent,
-        minHandle
-      )
-    ) {
-      (minTickLabel as HTMLSpanElement).style.opacity = "0";
-    } else {
-      (minTickLabel as HTMLSpanElement).style.opacity = "1";
-    }
-    if (
-      this.isMaxBoundingLabelObscured(
-        (maxTickLabel as HTMLElement).offsetParent,
-        minHandle
-      )
-    ) {
-      (maxTickLabel as HTMLSpanElement).style.opacity = "0";
-    } else {
-      (maxTickLabel as HTMLSpanElement).style.opacity = "1";
+    switch (whichHandles) {
+      default:
+        break;
+      case "min":
+        if (
+          this.isMinBoundingLabelObscured(
+            (minTickLabel as HTMLElement).offsetParent,
+            minHandle
+          )
+        ) {
+          (minTickLabel as HTMLSpanElement).style.opacity = "0";
+        } else {
+          (minTickLabel as HTMLSpanElement).style.opacity = "1";
+        }
+        if (
+          this.isMaxBoundingLabelObscured(
+            (maxTickLabel as HTMLElement).offsetParent,
+            minHandle
+          )
+        ) {
+          (maxTickLabel as HTMLSpanElement).style.opacity = "0";
+        } else {
+          (maxTickLabel as HTMLSpanElement).style.opacity = "1";
+        }
+        break;
+      case "both":
+        const maxHandle = this.el.shadowRoot.querySelector(`.thumb--max`);
+        if (
+          this.isMinBoundingLabelObscured(
+            (minTickLabel as HTMLElement).offsetParent,
+            minHandle
+          ) ||
+          this.isMinBoundingLabelObscured(
+            (minTickLabel as HTMLElement).offsetParent,
+            maxHandle
+          )
+        ) {
+          (minTickLabel as HTMLSpanElement).style.opacity = "0";
+        } else {
+          (minTickLabel as HTMLSpanElement).style.opacity = "1";
+        }
+        if (
+          this.isMaxBoundingLabelObscured(
+            (maxTickLabel as HTMLElement).offsetParent,
+            minHandle
+          ) ||
+          this.isMaxBoundingLabelObscured(
+            (maxTickLabel as HTMLElement).offsetParent,
+            maxHandle
+          )
+        ) {
+          (maxTickLabel as HTMLSpanElement).style.opacity = "0";
+        } else {
+          (maxTickLabel as HTMLSpanElement).style.opacity = "1";
+        }
+        break;
     }
   }
   /**
    * Checks if an element is out of the viewport on either the left or right side
-   * @link https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
    * @internal
    */
   private isOutOfViewport(element: HTMLElement): number {

From ad7b5c2d486330453f17d5e1d118433b167d5649 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Wed, 3 Jun 2020 16:41:09 -0700
Subject: [PATCH 27/52] feat: adding number formatting with toLocaleString

---
 .../calcite-slider/calcite-slider.tsx         | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 60b7ef423fa..8eec73e19d6 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -111,6 +111,7 @@ export class CalciteSlider {
     const min = this.minValue || this.min;
     const max = this.maxValue || this.value;
     const maxProp = this.isRange ? "maxValue" : "value";
+    const value = this[maxProp];
     const left = `${this.getUnitInterval(min) * 100}%`;
     const right = `${100 - this.getUnitInterval(max) * 100}%`;
 
@@ -124,7 +125,7 @@ export class CalciteSlider {
         role="slider"
         aria-orientation="horizontal"
         aria-label={this.isRange ? this.maxLabel : this.minLabel}
-        aria-valuenow={this[maxProp]}
+        aria-valuenow={value}
         aria-valuemin={this.min}
         aria-valuemax={this.max}
         disabled={this.disabled}
@@ -150,7 +151,7 @@ export class CalciteSlider {
         role="slider"
         aria-orientation="horizontal"
         aria-label={this.isRange ? this.maxLabel : this.minLabel}
-        aria-valuenow={this[maxProp]}
+        aria-valuenow={value}
         aria-valuemin={this.min}
         aria-valuemax={this.max}
         disabled={this.disabled}
@@ -163,13 +164,13 @@ export class CalciteSlider {
         }}
       >
         <span class="handle__label handle__label--value" aria-hidden="true">
-          {this[maxProp]}
+          {value ? value.toLocaleString() : value}
         </span>
         <span
           class="handle__label handle__label--value copy"
           aria-hidden="true"
         >
-          {this[maxProp]}
+          {value ? value.toLocaleString() : value}
         </span>
         <div class="handle"></div>
       </button>
@@ -185,7 +186,7 @@ export class CalciteSlider {
         role="slider"
         aria-orientation="horizontal"
         aria-label={this.isRange ? this.maxLabel : this.minLabel}
-        aria-valuenow={this[maxProp]}
+        aria-valuenow={value}
         aria-valuemin={this.min}
         aria-valuemax={this.max}
         disabled={this.disabled}
@@ -213,7 +214,7 @@ export class CalciteSlider {
         role="slider"
         aria-orientation="horizontal"
         aria-label={this.isRange ? this.maxLabel : this.minLabel}
-        aria-valuenow={this[maxProp]}
+        aria-valuenow={value}
         aria-valuemin={this.min}
         aria-valuemax={this.max}
         disabled={this.disabled}
@@ -227,13 +228,13 @@ export class CalciteSlider {
         }}
       >
         <span class="handle__label handle__label--value" aria-hidden="true">
-          {this[maxProp]}
+          {value ? value.toLocaleString() : value}
         </span>
         <span
           class="handle__label handle__label--value copy"
           aria-hidden="true"
         >
-          {this[maxProp]}
+          {value ? value.toLocaleString() : value}
         </span>
         <div class="handle"></div>
         <div class="handle-extension"></div>
@@ -250,7 +251,7 @@ export class CalciteSlider {
         role="slider"
         aria-orientation="horizontal"
         aria-label={this.isRange ? this.maxLabel : this.minLabel}
-        aria-valuenow={this[maxProp]}
+        aria-valuenow={value}
         aria-valuemin={this.min}
         aria-valuemax={this.max}
         disabled={this.disabled}
@@ -266,13 +267,13 @@ export class CalciteSlider {
         <div class="handle-extension"></div>
         <div class="handle"></div>
         <span class="handle__label handle__label--value" aria-hidden="true">
-          {this[maxProp]}
+          {value ? value.toLocaleString() : value}
         </span>
         <span
           class="handle__label handle__label--value copy"
           aria-hidden="true"
         >
-          {this[maxProp]}
+          {value ? value.toLocaleString() : value}
         </span>
       </button>
     );
@@ -324,13 +325,13 @@ export class CalciteSlider {
         }}
       >
         <span class="handle__label handle__label--minValue" aria-hidden="true">
-          {this.minValue}
+          {this.minValue && this.minValue.toLocaleString()}
         </span>
         <span
           class="handle__label handle__label--minValue copy"
           aria-hidden="true"
         >
-          {this.minValue}
+          {this.minValue && this.minValue.toLocaleString()}
         </span>
         <div class="handle"></div>
       </button>
@@ -388,13 +389,13 @@ export class CalciteSlider {
         <div class="handle-extension"></div>
         <div class="handle"></div>
         <span class="handle__label handle__label--minValue" aria-hidden="true">
-          {this.minValue}
+          {this.minValue && this.minValue.toLocaleString()}
         </span>
         <span
           class="handle__label handle__label--minValue copy"
           aria-hidden="true"
         >
-          {this.minValue}
+          {this.minValue && this.minValue.toLocaleString()}
         </span>
       </button>
     );
@@ -477,7 +478,7 @@ export class CalciteSlider {
           "tick__label--max": isMaxTickLabel,
         }}
       >
-        {tick}
+        {tick.toLocaleString()}
       </span>
     );
     if (this.labelTicks) {

From 8a336ec999688d81753fe293752c3adc6cd615c0 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 4 Jun 2020 15:41:08 -0700
Subject: [PATCH 28/52] adding missing demos and moving histogram non-precise
 labels below the handle, precise next

---
 .../calcite-slider/calcite-slider.scss        |  24 ++++
 .../calcite-slider/calcite-slider.tsx         | 131 +++++++++++++++---
 src/demos/calcite-slider.html                 |  84 ++++++++---
 3 files changed, 199 insertions(+), 40 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 866d4e1491b..9ac76df2dd1 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -119,6 +119,18 @@ $tick-height: 4px;
     transform: translate(-50%, -26px);
   }
 }
+:host([has-histogram][label-handles]) {
+  .thumb {
+    transform: translate(7px, -8px);
+    .handle__label {
+      margin-bottom: unset;
+      margin-top: 5px;
+    }
+  }
+  .thumb--min {
+    transform: translate(-50%, -8px);
+  }
+}
 :host([precise]) {
   .thumb {
     transform: translate(7px, -21px);
@@ -167,6 +179,18 @@ $tick-height: 4px;
     transform: translate(-50%, -2px);
   }
 }
+:host([has-histogram][precise][label-handles][is-range][ticks]) {
+  .thumb {
+    transform: translate(50%, -3px);
+    .handle__label {
+      margin-bottom: unset;
+      margin-top: 5px;
+    }
+  }
+  .thumb--min {
+    transform: translate(-50%, -3px);
+  }
+}
 
 .thumb:focus,
 .thumb--active {
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 8eec73e19d6..fa62629d589 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -176,6 +176,41 @@ export class CalciteSlider {
       </button>
     );
 
+    const histogramLabeledHandle = (
+      <button
+        ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = maxProp)}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart(maxProp)}
+        onTouchStart={(e) => this.dragStart(maxProp, e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.isRange ? this.maxLabel : this.minLabel}
+        aria-valuenow={value}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ right }}
+        class={{
+          thumb: true,
+          "thumb--max": true,
+          "thumb--active":
+            this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
+        }}
+      >
+        <div class="handle"></div>
+        <span class="handle__label handle__label--value" aria-hidden="true">
+          {value ? value.toLocaleString() : value}
+        </span>
+        <span
+          class="handle__label handle__label--value copy"
+          aria-hidden="true"
+        >
+          {value ? value.toLocaleString() : value}
+        </span>
+      </button>
+    );
+
     const preciseHandle = (
       <button
         ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
@@ -337,6 +372,40 @@ export class CalciteSlider {
       </button>
     );
 
+    const minHistogramLabeledHandle = (
+      <button
+        ref={(el) => (this.minHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = "minValue")}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart("minValue")}
+        onTouchStart={(e) => this.dragStart("minValue", e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.minLabel}
+        aria-valuenow={this.minValue}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ left }}
+        class={{
+          thumb: true,
+          "thumb--min": true,
+          "thumb--active": this.dragProp === "minValue",
+        }}
+      >
+        <div class="handle"></div>
+        <span class="handle__label handle__label--minValue" aria-hidden="true">
+          {this.minValue && this.minValue.toLocaleString()}
+        </span>
+        <span
+          class="handle__label handle__label--minValue copy"
+          aria-hidden="true"
+        >
+          {this.minValue && this.minValue.toLocaleString()}
+        </span>
+      </button>
+    );
+
     const minPreciseHandle = (
       <button
         ref={(el) => (this.minHandle = el as HTMLButtonElement)}
@@ -426,29 +495,47 @@ export class CalciteSlider {
             ))}
           </div>
         </div>
-        {!this.precise && !this.labelHandles && this.isRange ? minHandle : null}
-        {!this.precise && this.labelHandles && this.isRange
-          ? minLabeledHandle
-          : null}
-        {this.precise && !this.labelHandles && this.isRange
-          ? minPreciseHandle
-          : null}
-        {this.precise && this.labelHandles && this.isRange
-          ? minLabeledPreciseHandle
-          : null}
+        {!this.precise && !this.labelHandles && this.isRange && minHandle}
+        {!this.hasHistogram &&
+          !this.precise &&
+          this.labelHandles &&
+          this.isRange &&
+          minLabeledHandle}
+        {this.precise && !this.labelHandles && this.isRange && minPreciseHandle}
+        {this.precise &&
+          this.labelHandles &&
+          this.isRange &&
+          minLabeledPreciseHandle}
+        {this.hasHistogram &&
+          !this.precise &&
+          this.labelHandles &&
+          this.isRange &&
+          minHistogramLabeledHandle}
 
-        {!this.precise && !this.labelHandles ? handle : null}
-        {!this.precise && this.labelHandles ? labeledHandle : null}
-        {this.precise && !this.labelHandles ? preciseHandle : null}
-        {!this.hasHistogram && this.precise && this.labelHandles
-          ? labeledPreciseHandle
-          : null}
-        {this.hasHistogram && this.precise && this.labelHandles && !this.isRange
-          ? labeledPreciseHandle
-          : null}
-        {this.hasHistogram && this.precise && this.labelHandles && this.isRange
-          ? histogramLabeledPreciseHandle
-          : null}
+        {!this.precise && !this.labelHandles && handle}
+        {!this.hasHistogram &&
+          !this.precise &&
+          this.labelHandles &&
+          labeledHandle}
+        {this.precise && !this.labelHandles && preciseHandle}
+        {!this.hasHistogram &&
+          this.precise &&
+          this.labelHandles &&
+          labeledPreciseHandle}
+        {this.hasHistogram &&
+          !this.precise &&
+          this.labelHandles &&
+          histogramLabeledHandle}
+        {this.hasHistogram &&
+          this.precise &&
+          this.labelHandles &&
+          !this.isRange &&
+          labeledPreciseHandle}
+        {this.hasHistogram &&
+          this.precise &&
+          this.labelHandles &&
+          this.isRange &&
+          histogramLabeledPreciseHandle}
       </Host>
     );
   }
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 91d626a89ca..f53ad08a1ad 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -43,10 +43,22 @@ <h3>Precise Labeled Handle</h3>
   </calcite-slider>
 
   <h3>Ticks</h3>
-  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label="Temperature"></calcite-slider>
+  <calcite-slider min="0" max="100" value="20" step="10" ticks="10" label="Temperature"></calcite-slider>
+
+  <h3>Ticks with Labeled Handle</h3>
+  <calcite-slider min="0" max="100" value="40" step="10" ticks="10" label="Temperature" label-handles></calcite-slider>
+
+  <h3>Ticks with Precise Handle</h3>
+  <calcite-slider min="0" max="100" value="50" step="10" ticks="10" label="Temperature" precise></calcite-slider>
+
+  <h3>Ticks with Precise Labeled Handle</h3>
+  <calcite-slider min="0" max="100" value="60" step="10" ticks="10" label="Temperature" label-handles precise></calcite-slider>
 
   <h3>Labeled Ticks</h3>
-  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks label="Temperature"></calcite-slider>
+  <calcite-slider min="0" max="100" value="20" step="10" ticks="10" label-ticks label="Temperature"></calcite-slider>
+
+  <h3>Labeled Ticks with Labeled Handle</h3>
+  <calcite-slider min="0" max="100" value="40" step="10" ticks="10" label="Temperature" label-handles label-ticks></calcite-slider>
 
   <h3>Labeled Ticks with Precise Handle</h3>
   <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks precise label="Temperature">
@@ -63,26 +75,38 @@ <h3>Disabled</h3>
     <h3>Histogram</h3>
     <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
 
-    <h3>Histogram Labeled Handle</h3>
+    <h3>Histogram with Labeled Handle</h3>
     <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" label-handles></calcite-slider>
 
-    <h3>Histogram Precise Handle</h3>
+    <h3>Histogram with Precise Handle</h3>
     <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" precise></calcite-slider>
 
-    <h3>Histogram Precise Labeled Handle</h3>
+    <h3>Histogram with Precise Labeled Handle</h3>
     <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" label-handles precise></calcite-slider>
 
-    <h3>Histogram Ticks</h3>
+    <h3>Histogram with Ticks</h3>
     <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10"></calcite-slider>
 
-    <h3>Histogram Labeled Ticks</h3>
+    <h3>Histogram with Ticks and Labeled Handle</h3>
+    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles></calcite-slider>
+
+    <h3>Histogram with Ticks and Precise Handle</h3>
+    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" precise></calcite-slider>
+
+    <h3>Histogram with Ticks and Labeled Precise Handle</h3>
+    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles precise></calcite-slider>
+
+    <h3>Histogram with Labeled Ticks</h3>
     <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-ticks></calcite-slider>
 
-    <h3>Histogram Labeled Ticks with Precise Handle</h3>
+    <h3>Histogram with Labeled Ticks and Labeled Handle</h3>
+    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles label-ticks></calcite-slider>
+
+    <h3>Histogram with Labeled Ticks and Precise Handle</h3>
     <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-ticks precise>
     </calcite-slider>
 
-    <h3>Histogram Labeled Ticks with Precise Labeled Handle</h3>
+    <h3>Histogram with Labeled Ticks and Precise Labeled Handle</h3>
     <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles label-ticks
       precise></calcite-slider>
 
@@ -112,20 +136,30 @@ <h3>Ticks</h3>
   <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature">
   </calcite-slider>
 
+  <h3>Ticks with Labeled Handles</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-handles></calcite-slider>
+
   <h3>Ticks with Precise Handles</h3>
   <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise>
   </calcite-slider>
 
+  <h3>Ticks with Precise Labeled Handles</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-handles precise>
+  </calcite-slider>
+
   <h3>Labeled Ticks</h3>
   <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-ticks>
   </calcite-slider>
 
+  <h3>Labeled Ticks with Labeled Handles</h3>
+  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-handles label-ticks></calcite-slider>
+
   <h3>Labeled Ticks with Precise Handles</h3>
   <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise
     label-ticks></calcite-slider>
 
   <h3>Labeled Ticks with Precise Labeled Handles</h3>
-  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="10000" ticks="10000"
+  <calcite-slider min="10000" max="100000" min-value="30000" max-value="80000" step="10000" ticks="10000"
     label="Temperature" precise label-handles label-ticks></calcite-slider>
 
   <div style="max-width: 400px">
@@ -134,38 +168,52 @@ <h3>Histogram</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
       max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
 
-    <h3>Histogram Labeled Handles</h3>
+    <h3>Histogram with Labeled Handles</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
       max-label="Temperature range (upper)" class="js-histogram" label-handles></calcite-slider>
 
-    <h3>Histogram Precise Handles</h3>
+    <h3>Histogram with Precise Handles</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
       max-label="Temperature range (upper)" class="js-histogram" precise></calcite-slider>
 
-    <h3>Histogram Precise Labeled Handles</h3>
+    <h3>Histogram with Precise Labeled Handles</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
       max-label="Temperature range (upper)" class="js-histogram" precise label-handles></calcite-slider>
 
-    <h3>Histogram Ticks</h3>
+    <h3>Histogram with Ticks</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
       min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
 
-    <h3>Histogram Ticks with Precise Handles</h3>
+    <h3>Histogram with Ticks and Labeled Handles</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles></calcite-slider>
+
+    <h3>Histogram with Ticks and Precise Handles</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
       min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" precise>
     </calcite-slider>
 
-    <h3>Histogram Labeled Ticks</h3>
+    <h3>Histogram with Ticks and Precise Labeled Handles</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles precise>
+    </calcite-slider>
+
+    <h3>Histogram with Labeled Ticks</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
       min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-ticks>
     </calcite-slider>
 
-    <h3>Histogram Labeled Ticks with Precise Handles</h3>
+    <h3>Histogram with Labeled Ticks and Labeled Handles</h3>
+    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles label-ticks>
+    </calcite-slider>
+
+    <h3>Histogram with Labeled Ticks and Precise Handles</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
       min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-ticks precise>
     </calcite-slider>
 
-    <h3>Histogram Labeled Ticks with Precise Labeled Handles</h3>
+    <h3>Histogram with Labeled Ticks and Precise Labeled Handles</h3>
     <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
       min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles label-ticks precise>
     </calcite-slider>

From 29b0c920318390a57b08b86a46d2b22470ccfe81 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 4 Jun 2020 16:09:17 -0700
Subject: [PATCH 29/52] fix: moving all histogram labels and precise handles
 below track

---
 .../calcite-slider/calcite-slider.scss        | 32 ++++++++++++++
 .../calcite-slider/calcite-slider.tsx         | 43 ++++++++++++++++---
 src/demos/calcite-slider.html                 |  2 +-
 3 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 9ac76df2dd1..939a06f85ca 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -143,6 +143,14 @@ $tick-height: 4px;
     }
   }
 }
+:host([has-histogram][precise]) {
+  .thumb {
+    transform: translate(7px, -2px);
+  }
+  .thumb--min {
+    transform: translate(-50%, -2px);
+  }
+}
 :host([precise][ticks]) {
   .thumb {
     transform: translate(7px, -20px);
@@ -151,6 +159,14 @@ $tick-height: 4px;
     transform: translate(-7px, -3px);
   }
 }
+:host([has-histogram][precise][ticks]) {
+  .thumb {
+    transform: translate(7px, -3px);
+  }
+  .thumb--min {
+    transform: translate(-50%, -3px);
+  }
+}
 :host([precise][label-handles]) {
   .thumb {
     transform: translate(50%, -39px);
@@ -159,6 +175,14 @@ $tick-height: 4px;
     transform: translate(-50%, -2px);
   }
 }
+:host([has-histogram][precise][label-handles]) {
+  .thumb {
+    transform: translate(7px, -2px);
+  }
+  .thumb--min {
+    transform: translate(-50%, -2px);
+  }
+}
 :host([precise][ticks][label-handles]) {
   .thumb {
     transform: translate(50%, -38px);
@@ -167,6 +191,14 @@ $tick-height: 4px;
     transform: translate(-50%, -3px);
   }
 }
+:host([has-histogram][precise][ticks][label-handles]) {
+  .thumb {
+    transform: translate(50%, -3px);
+  }
+  .thumb--min {
+    transform: translate(-50%, -3px);
+  }
+}
 :host([has-histogram][precise][label-handles][is-range]) {
   .thumb {
     transform: translate(50%, -2px);
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index fa62629d589..d7502a42a73 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -239,6 +239,34 @@ export class CalciteSlider {
       </button>
     );
 
+    const histogramPreciseHandle = (
+      <button
+        ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
+        onFocus={() => (this.activeProp = maxProp)}
+        onBlur={() => (this.activeProp = null)}
+        onMouseDown={() => this.dragStart(maxProp)}
+        onTouchStart={(e) => this.dragStart(maxProp, e)}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-label={this.isRange ? this.maxLabel : this.minLabel}
+        aria-valuenow={value}
+        aria-valuemin={this.min}
+        aria-valuemax={this.max}
+        disabled={this.disabled}
+        style={{ right }}
+        class={{
+          thumb: true,
+          "thumb--max": true,
+          "thumb--active":
+            this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
+          "thumb--precise": true,
+        }}
+      >
+        <div class="handle-extension"></div>
+        <div class="handle"></div>
+      </button>
+    );
+
     const labeledPreciseHandle = (
       <button
         ref={(el) => (this.maxHandle = el as HTMLButtonElement)}
@@ -517,7 +545,14 @@ export class CalciteSlider {
           !this.precise &&
           this.labelHandles &&
           labeledHandle}
-        {this.precise && !this.labelHandles && preciseHandle}
+        {!this.hasHistogram &&
+          this.precise &&
+          !this.labelHandles &&
+          preciseHandle}
+        {this.hasHistogram &&
+          this.precise &&
+          !this.labelHandles &&
+          histogramPreciseHandle}
         {!this.hasHistogram &&
           this.precise &&
           this.labelHandles &&
@@ -529,12 +564,6 @@ export class CalciteSlider {
         {this.hasHistogram &&
           this.precise &&
           this.labelHandles &&
-          !this.isRange &&
-          labeledPreciseHandle}
-        {this.hasHistogram &&
-          this.precise &&
-          this.labelHandles &&
-          this.isRange &&
           histogramLabeledPreciseHandle}
       </Host>
     );
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index f53ad08a1ad..c842de458d6 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -93,7 +93,7 @@ <h3>Histogram with Ticks and Labeled Handle</h3>
     <h3>Histogram with Ticks and Precise Handle</h3>
     <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" precise></calcite-slider>
 
-    <h3>Histogram with Ticks and Labeled Precise Handle</h3>
+    <h3>Histogram with Ticks and Precise Labeled Handle</h3>
     <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles precise></calcite-slider>
 
     <h3>Histogram with Labeled Ticks</h3>

From 2fa4251d7f668482758f2cf47a1da9accdd4399c Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 4 Jun 2020 16:44:49 -0700
Subject: [PATCH 30/52] Removing unnecessary css after previous refactor

---
 .../calcite-slider/calcite-slider.scss        | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 939a06f85ca..c4e220b5d59 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -199,30 +199,6 @@ $tick-height: 4px;
     transform: translate(-50%, -3px);
   }
 }
-:host([has-histogram][precise][label-handles][is-range]) {
-  .thumb {
-    transform: translate(50%, -2px);
-    .handle__label {
-      margin-bottom: unset;
-      margin-top: 5px;
-    }
-  }
-  .thumb--min {
-    transform: translate(-50%, -2px);
-  }
-}
-:host([has-histogram][precise][label-handles][is-range][ticks]) {
-  .thumb {
-    transform: translate(50%, -3px);
-    .handle__label {
-      margin-bottom: unset;
-      margin-top: 5px;
-    }
-  }
-  .thumb--min {
-    transform: translate(-50%, -3px);
-  }
-}
 
 .thumb:focus,
 .thumb--active {

From 9c41b4915f5f1251bce78de7450a1c52ba92ec22 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 4 Jun 2020 16:59:17 -0700
Subject: [PATCH 31/52] Only showing endcap tick labels when precise label
 handles are used on a histogram range

---
 src/components/calcite-slider/calcite-slider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index d7502a42a73..e3f3c9cb9e4 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -599,7 +599,7 @@ export class CalciteSlider {
     );
     if (this.labelTicks) {
       if (this.isRange) {
-        if (this.precise) {
+        if (this.precise || this.labelHandles) {
           if (isMinTickLabel || isMaxTickLabel) {
             return tickLabel;
           } else {

From 019838d98b16eb0e35469fe04269b4db5ed9bd7b Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 5 Jun 2020 10:54:55 -0700
Subject: [PATCH 32/52] fix: font size adjustments per design and fixes for
 precise handle position

---
 src/components/calcite-slider/calcite-slider.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index c4e220b5d59..f52ce2ca251 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -59,10 +59,10 @@ $tick-height: 4px;
 
   .handle__label {
     transition: transform 150ms;
-    @include font-size(-3);
+    @include font-size(-4);
     font-weight: 500;
     line-height: 1;
-    color: var(--calcite-ui-text-3);
+    color: var(--calcite-ui-text-2);
     margin-bottom: 5px;
     &.copy {
       opacity: 0;
@@ -169,7 +169,7 @@ $tick-height: 4px;
 }
 :host([precise][label-handles]) {
   .thumb {
-    transform: translate(50%, -39px);
+    transform: translate(50%, -38px);
   }
   .thumb--min {
     transform: translate(-50%, -2px);
@@ -185,7 +185,7 @@ $tick-height: 4px;
 }
 :host([precise][ticks][label-handles]) {
   .thumb {
-    transform: translate(50%, -38px);
+    transform: translate(50%, -37px);
   }
   .thumb--min {
     transform: translate(-50%, -3px);
@@ -264,9 +264,9 @@ $tick-height: 4px;
 
 .tick__label {
   position: absolute;
-  @include font-size(-3);
+  @include font-size(-4);
   font-weight: 500;
-  color: var(--calcite-ui-text-3);
+  color: var(--calcite-ui-text-2);
   width: 4em;
   margin: $thumb-size / 2 -2em;
   text-align: center;

From 89795d6e4140e2cdcfabe4160ac525096f4fc82d Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 5 Jun 2020 11:40:13 -0700
Subject: [PATCH 33/52] converting tick labels to endcap labels for labeled
 ticks with precise handles for range sliders

---
 src/components/calcite-slider/calcite-slider.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index e3f3c9cb9e4..4376b300c7c 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -598,15 +598,15 @@ export class CalciteSlider {
       </span>
     );
     if (this.labelTicks) {
-      if (this.isRange) {
-        if (this.precise || this.labelHandles) {
-          if (isMinTickLabel || isMaxTickLabel) {
-            return tickLabel;
-          } else {
-            return null;
-          }
+      if (this.hasHistogram || (this.isRange && this.precise)) {
+        if (
+          (this.precise || this.labelHandles) &&
+          (isMinTickLabel || isMaxTickLabel)
+        ) {
+          return tickLabel;
+        } else {
+          return null;
         }
-        return tickLabel;
       }
       return tickLabel;
     }

From 7a12500342d5e73b8a5474d1535c5a650e603521 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 5 Jun 2020 15:00:22 -0700
Subject: [PATCH 34/52] more positioning bug fixes

---
 src/components/calcite-slider/calcite-slider.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index f52ce2ca251..5e24cf75b53 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -77,7 +77,7 @@ $tick-height: 4px;
     width: $handle-size;
     box-sizing: border-box;
     border-radius: 100%;
-    background-color: var(--calcite-ui-foreground-1);
+    // background-color: var(--calcite-ui-foreground-1);
     box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
     transition: border 0.25s ease, background-color 0.25s ease,
       box-shadow 0.25s ease;
@@ -113,15 +113,15 @@ $tick-height: 4px;
 }
 :host([label-handles]) {
   .thumb {
-    transform: translate(50%, -26px);
+    transform: translate(50%, -25px);
   }
   .thumb--min {
-    transform: translate(-50%, -26px);
+    transform: translate(-50%, -25px);
   }
 }
 :host([has-histogram][label-handles]) {
   .thumb {
-    transform: translate(7px, -8px);
+    transform: translate(50%, -8px);
     .handle__label {
       margin-bottom: unset;
       margin-top: 5px;
@@ -177,7 +177,7 @@ $tick-height: 4px;
 }
 :host([has-histogram][precise][label-handles]) {
   .thumb {
-    transform: translate(7px, -2px);
+    transform: translate(50%, -2px);
   }
   .thumb--min {
     transform: translate(-50%, -2px);
@@ -204,7 +204,7 @@ $tick-height: 4px;
 .thumb--active {
   z-index: 3;
   .handle {
-    background-color: var(--calcite-ui-blue-1);
+    // background-color: var(--calcite-ui-blue-1);
     @include shadow(1, "press");
   }
 }

From 97da0afd510b74ae870fe48f745c36299b73f8e8 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 5 Jun 2020 16:44:10 -0700
Subject: [PATCH 35/52] endcap tick label margin adjustment

---
 src/components/calcite-slider/calcite-slider.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 5e24cf75b53..7899c682eb0 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -289,6 +289,13 @@ $tick-height: 4px;
   transition: opacity 50ms;
 }
 
+:host([has-histogram]) {
+  .tick__label--min,
+  .tick__label--max {
+    margin: 6px -3px;
+  }
+}
+
 .graph {
   width: 100%;
   height: 48px;

From 11e3f0eb4213c93f34fc9f675c9b59911450ec6f Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 5 Jun 2020 16:45:59 -0700
Subject: [PATCH 36/52] more endcap styles

---
 src/components/calcite-slider/calcite-slider.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 7899c682eb0..2488f39cb01 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -293,6 +293,8 @@ $tick-height: 4px;
   .tick__label--min,
   .tick__label--max {
     margin: 6px -3px;
+    font-weight: 300;
+    color: var(--calcite-ui-text-3);
   }
 }
 

From d6a31a99d3a5841c98eaa9907680754c77182293 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Mon, 8 Jun 2020 11:40:05 -0700
Subject: [PATCH 37/52] fixing tick label bugs

---
 .../calcite-slider/calcite-slider.tsx         | 95 +++++++++++++++----
 1 file changed, 77 insertions(+), 18 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 4376b300c7c..b5df4468f65 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -97,12 +97,15 @@ export class CalciteSlider {
     this.adjustObscuredHandleLabel("value");
     if (this.isRange) {
       this.adjustObscuredHandleLabel("minValue");
-      if (this.precise && this.labelTicks) {
-        this.hideObscuredBoundingTrackLabels("min");
-        if (this.hasHistogram && this.labelHandles) {
-          this.hideObscuredBoundingTrackLabels("both");
-        }
-      }
+    }
+    if (!this.hasHistogram && this.precise && this.labelTicks && this.isRange) {
+      this.hideObscuredBoundingTrackLabels("min");
+    }
+    if (this.hasHistogram && this.labelTicks && !this.isRange) {
+      this.hideObscuredBoundingTrackLabels("max");
+    }
+    if (this.hasHistogram && this.labelTicks && this.isRange) {
+      this.hideObscuredBoundingTrackLabels("both");
     }
   }
 
@@ -597,17 +600,69 @@ export class CalciteSlider {
         {tick.toLocaleString()}
       </span>
     );
-    if (this.labelTicks) {
-      if (this.hasHistogram || (this.isRange && this.precise)) {
-        if (
-          (this.precise || this.labelHandles) &&
-          (isMinTickLabel || isMaxTickLabel)
-        ) {
-          return tickLabel;
-        } else {
-          return null;
-        }
-      }
+    if (this.labelTicks && !this.hasHistogram && !this.isRange) {
+      return tickLabel;
+    }
+    if (
+      this.labelTicks &&
+      !this.hasHistogram &&
+      this.isRange &&
+      !this.precise &&
+      !this.labelHandles
+    ) {
+      return tickLabel;
+    }
+    if (
+      this.labelTicks &&
+      !this.hasHistogram &&
+      this.isRange &&
+      !this.precise &&
+      this.labelHandles
+    ) {
+      return tickLabel;
+    }
+    if (
+      this.labelTicks &&
+      !this.hasHistogram &&
+      this.isRange &&
+      this.precise &&
+      (isMinTickLabel || isMaxTickLabel)
+    ) {
+      return tickLabel;
+    }
+    if (
+      this.labelTicks &&
+      this.hasHistogram &&
+      !this.precise &&
+      !this.labelHandles
+    ) {
+      return tickLabel;
+    }
+    if (
+      this.labelTicks &&
+      this.hasHistogram &&
+      this.precise &&
+      !this.labelHandles &&
+      (isMinTickLabel || isMaxTickLabel)
+    ) {
+      return tickLabel;
+    }
+    if (
+      this.labelTicks &&
+      this.hasHistogram &&
+      !this.precise &&
+      this.labelHandles &&
+      (isMinTickLabel || isMaxTickLabel)
+    ) {
+      return tickLabel;
+    }
+    if (
+      this.labelTicks &&
+      this.hasHistogram &&
+      this.precise &&
+      this.labelHandles &&
+      (isMinTickLabel || isMaxTickLabel)
+    ) {
       return tickLabel;
     }
     return null;
@@ -894,7 +949,9 @@ export class CalciteSlider {
       }
     }
   }
-  private hideObscuredBoundingTrackLabels(whichHandles: "min" | "both") {
+  private hideObscuredBoundingTrackLabels(
+    whichHandles: "min" | "max" | "both"
+  ) {
     const minHandle = this.el.shadowRoot.querySelector(`.thumb--min`);
     const minTickLabel = this.el.shadowRoot.querySelector(".tick__label--min");
     const maxTickLabel = this.el.shadowRoot.querySelector(".tick__label--max");
@@ -912,6 +969,8 @@ export class CalciteSlider {
         } else {
           (minTickLabel as HTMLSpanElement).style.opacity = "1";
         }
+        break;
+      case "max":
         if (
           this.isMaxBoundingLabelObscured(
             (maxTickLabel as HTMLElement).offsetParent,

From 15a58afe46439c3da7def2e66c289fd3aac09f03 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Mon, 8 Jun 2020 15:41:58 -0700
Subject: [PATCH 38/52] finally getting bounding track label hiding logic
 working

---
 .../calcite-slider/calcite-slider.tsx         | 156 +++++++++---------
 1 file changed, 81 insertions(+), 75 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index b5df4468f65..0c4ee5d27d2 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -98,15 +98,7 @@ export class CalciteSlider {
     if (this.isRange) {
       this.adjustObscuredHandleLabel("minValue");
     }
-    if (!this.hasHistogram && this.precise && this.labelTicks && this.isRange) {
-      this.hideObscuredBoundingTrackLabels("min");
-    }
-    if (this.hasHistogram && this.labelTicks && !this.isRange) {
-      this.hideObscuredBoundingTrackLabels("max");
-    }
-    if (this.hasHistogram && this.labelTicks && this.isRange) {
-      this.hideObscuredBoundingTrackLabels("both");
-    }
+    this.hideObscuredBoundingTickLabels();
   }
 
   render() {
@@ -949,70 +941,84 @@ export class CalciteSlider {
       }
     }
   }
-  private hideObscuredBoundingTrackLabels(
-    whichHandles: "min" | "max" | "both"
-  ) {
-    const minHandle = this.el.shadowRoot.querySelector(`.thumb--min`);
-    const minTickLabel = this.el.shadowRoot.querySelector(".tick__label--min");
-    const maxTickLabel = this.el.shadowRoot.querySelector(".tick__label--max");
-    switch (whichHandles) {
-      default:
-        break;
-      case "min":
-        if (
-          this.isMinBoundingLabelObscured(
-            (minTickLabel as HTMLElement).offsetParent,
-            minHandle
-          )
-        ) {
-          (minTickLabel as HTMLSpanElement).style.opacity = "0";
-        } else {
-          (minTickLabel as HTMLSpanElement).style.opacity = "1";
-        }
-        break;
-      case "max":
-        if (
-          this.isMaxBoundingLabelObscured(
-            (maxTickLabel as HTMLElement).offsetParent,
-            minHandle
-          )
-        ) {
-          (maxTickLabel as HTMLSpanElement).style.opacity = "0";
-        } else {
-          (maxTickLabel as HTMLSpanElement).style.opacity = "1";
-        }
-        break;
-      case "both":
-        const maxHandle = this.el.shadowRoot.querySelector(`.thumb--max`);
-        if (
-          this.isMinBoundingLabelObscured(
-            (minTickLabel as HTMLElement).offsetParent,
-            minHandle
-          ) ||
-          this.isMinBoundingLabelObscured(
-            (minTickLabel as HTMLElement).offsetParent,
-            maxHandle
-          )
-        ) {
-          (minTickLabel as HTMLSpanElement).style.opacity = "0";
-        } else {
-          (minTickLabel as HTMLSpanElement).style.opacity = "1";
-        }
-        if (
-          this.isMaxBoundingLabelObscured(
-            (maxTickLabel as HTMLElement).offsetParent,
-            minHandle
-          ) ||
-          this.isMaxBoundingLabelObscured(
-            (maxTickLabel as HTMLElement).offsetParent,
-            maxHandle
-          )
-        ) {
-          (maxTickLabel as HTMLSpanElement).style.opacity = "0";
-        } else {
-          (maxTickLabel as HTMLSpanElement).style.opacity = "1";
-        }
-        break;
+  private hideObscuredBoundingTickLabels() {
+    if (
+      !this.hasHistogram &&
+      !this.isRange &&
+      !this.labelHandles &&
+      !this.precise
+    ) {
+      return;
+    }
+    if (
+      !this.hasHistogram &&
+      !this.isRange &&
+      this.labelHandles &&
+      !this.precise
+    ) {
+      return;
+    }
+    if (
+      !this.hasHistogram &&
+      !this.isRange &&
+      !this.labelHandles &&
+      this.precise
+    ) {
+      return;
+    }
+    if (
+      !this.hasHistogram &&
+      !this.isRange &&
+      this.labelHandles &&
+      this.precise
+    ) {
+      return;
+    }
+    if (!this.hasHistogram && this.isRange && !this.precise) {
+      return;
+    }
+
+    const minHandle = this.el.shadowRoot.querySelector(".thumb--min");
+    const maxHandle = this.el.shadowRoot.querySelector(".thumb--max");
+
+    const minTickLabel: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      ".tick__label--min"
+    );
+    const maxTickLabel: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      ".tick__label--max"
+    );
+
+    if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
+      if (this.isMinTickLabelObscured(minTickLabel.offsetParent, maxHandle)) {
+        minTickLabel.style.opacity = "0";
+      } else {
+        minTickLabel.style.opacity = "1";
+      }
+      if (this.isMaxTickLabelObscured(maxTickLabel.offsetParent, maxHandle)) {
+        maxTickLabel.style.opacity = "0";
+      } else {
+        maxTickLabel.style.opacity = "1";
+      }
+    }
+
+    if (minHandle && maxHandle && minTickLabel && maxTickLabel) {
+      if (
+        this.isMinTickLabelObscured(minTickLabel.offsetParent, minHandle) ||
+        this.isMinTickLabelObscured(minTickLabel.offsetParent, maxHandle)
+      ) {
+        minTickLabel.style.opacity = "0";
+      } else {
+        minTickLabel.style.opacity = "1";
+      }
+      if (
+        this.isMaxTickLabelObscured(maxTickLabel.offsetParent, minHandle) ||
+        (this.isMaxTickLabelObscured(maxTickLabel.offsetParent, maxHandle) &&
+          this.hasHistogram)
+      ) {
+        maxTickLabel.style.opacity = "0";
+      } else {
+        maxTickLabel.style.opacity = "1";
+      }
     }
   }
   /**
@@ -1035,7 +1041,7 @@ export class CalciteSlider {
     return 0;
   }
 
-  private isMinBoundingLabelObscured(minLabel, handle) {
+  private isMinTickLabelObscured(minLabel, handle) {
     const minLabelRight = minLabel.offsetLeft + minLabel.offsetWidth;
     const handleLeft = handle.offsetLeft;
     if (handleLeft < minLabelRight) {
@@ -1044,7 +1050,7 @@ export class CalciteSlider {
     return false;
   }
 
-  private isMaxBoundingLabelObscured(maxLabel, handle) {
+  private isMaxTickLabelObscured(maxLabel, handle) {
     const maxLabelLeft = maxLabel.offsetLeft;
     const handleRight = handle.offsetLeft + handle.offsetWidth;
     if (handleRight > maxLabelLeft) {

From 2eec824e3df037f9d655c06250a7be38d280927d Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Mon, 8 Jun 2020 16:03:39 -0700
Subject: [PATCH 39/52] fix: endcaps shouldn't display for non-precise or
 non-labeled handle histograms

---
 .../calcite-slider/calcite-slider.scss        | 25 ++++++++++++-------
 .../calcite-slider/calcite-slider.tsx         |  3 +++
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 2488f39cb01..df9e312c32b 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -9,6 +9,15 @@ $thumb-padding: ($thumb-size - $handle-size) / 2;
 $track-height: 2px;
 $tick-height: 4px;
 
+@mixin histogramEndcaps() {
+  .tick__label--min,
+  .tick__label--max {
+    margin: 6px -3px;
+    font-weight: 300;
+    color: var(--calcite-ui-text-3);
+  }
+}
+
 :host {
   display: block;
   padding: $handle-size / 2 0;
@@ -77,7 +86,7 @@ $tick-height: 4px;
     width: $handle-size;
     box-sizing: border-box;
     border-radius: 100%;
-    // background-color: var(--calcite-ui-foreground-1);
+    background-color: var(--calcite-ui-foreground-1);
     box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
     transition: border 0.25s ease, background-color 0.25s ease,
       box-shadow 0.25s ease;
@@ -204,7 +213,7 @@ $tick-height: 4px;
 .thumb--active {
   z-index: 3;
   .handle {
-    // background-color: var(--calcite-ui-blue-1);
+    background-color: var(--calcite-ui-blue-1);
     @include shadow(1, "press");
   }
 }
@@ -289,13 +298,11 @@ $tick-height: 4px;
   transition: opacity 50ms;
 }
 
-:host([has-histogram]) {
-  .tick__label--min,
-  .tick__label--max {
-    margin: 6px -3px;
-    font-weight: 300;
-    color: var(--calcite-ui-text-3);
-  }
+:host([has-histogram][label-handles]) {
+  @include histogramEndcaps();
+}
+:host([has-histogram][precise]) {
+  @include histogramEndcaps();
 }
 
 .graph {
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 0c4ee5d27d2..430d06851b4 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -977,6 +977,9 @@ export class CalciteSlider {
     if (!this.hasHistogram && this.isRange && !this.precise) {
       return;
     }
+    if (this.hasHistogram && !this.precise && !this.labelHandles) {
+      return;
+    }
 
     const minHandle = this.el.shadowRoot.querySelector(".thumb--min");
     const maxHandle = this.el.shadowRoot.querySelector(".thumb--max");

From 347cf94c6c485420608422d1a9c6aa6f526c70d9 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Tue, 9 Jun 2020 09:06:16 -0700
Subject: [PATCH 40/52] adjusting slider demo page to add dark versions

---
 src/demos/calcite-radio-button.html | 216 +++++++----
 src/demos/calcite-slider.html       | 543 ++++++++++++++++++++--------
 2 files changed, 533 insertions(+), 226 deletions(-)

diff --git a/src/demos/calcite-radio-button.html b/src/demos/calcite-radio-button.html
index 3f9a5d0f4ae..9503d87c70d 100644
--- a/src/demos/calcite-radio-button.html
+++ b/src/demos/calcite-radio-button.html
@@ -65,10 +65,13 @@ <h3>Scale s</h3>
 
                   <hr>
 
-                  <calcite-radio-button name="s-disabled-single" scale="s" value="stencil" checked>Stencil</calcite-radio-button>
-                  <calcite-radio-button name="s-disabled-single" scale="s" value="react" disabled>React</calcite-radio-button>
+                  <calcite-radio-button name="s-disabled-single" scale="s" value="stencil" checked>Stencil
+                  </calcite-radio-button>
+                  <calcite-radio-button name="s-disabled-single" scale="s" value="react" disabled>React
+                  </calcite-radio-button>
                   <calcite-radio-button name="s-disabled-single" scale="s" value="ember">Ember</calcite-radio-button>
-                  <calcite-radio-button name="s-disabled-single" scale="s" value="angular">Angular</calcite-radio-button>
+                  <calcite-radio-button name="s-disabled-single" scale="s" value="angular">Angular
+                  </calcite-radio-button>
 
                   <h3>Scale m (default)</h3>
                   <calcite-radio-button name="m" value="stencil" checked>Stencil</calcite-radio-button>
@@ -91,10 +94,13 @@ <h3>Scale l</h3>
 
                   <hr>
 
-                  <calcite-radio-button name="l-disabled-single" scale="l" value="stencil" checked>Stencil</calcite-radio-button>
-                  <calcite-radio-button name="l-disabled-single" scale="l" value="react" disabled>React</calcite-radio-button>
+                  <calcite-radio-button name="l-disabled-single" scale="l" value="stencil" checked>Stencil
+                  </calcite-radio-button>
+                  <calcite-radio-button name="l-disabled-single" scale="l" value="react" disabled>React
+                  </calcite-radio-button>
                   <calcite-radio-button name="l-disabled-single" scale="l" value="ember">Ember</calcite-radio-button>
-                  <calcite-radio-button name="l-disabled-single" scale="l" value="angular">Angular</calcite-radio-button>
+                  <calcite-radio-button name="l-disabled-single" scale="l" value="angular">Angular
+                  </calcite-radio-button>
 
                   <h3>Uses value as label if missing</h3>
                   <calcite-radio-button name="valueAsLabel" value="1" checked></calcite-radio-button>
@@ -121,8 +127,10 @@ <h3>Only one checked value (first wins, first two checked)</h3>
                   <calcite-radio-button name="firstCheckedWinsFirst2" value="2" checked></calcite-radio-button>
                   <calcite-radio-button name="firstCheckedWinsFirst2" value="3"></calcite-radio-button>
                   <hr>
-                  <calcite-radio-button name="firstCheckedWinsDisabledSingleFirst2" value="1" checked></calcite-radio-button>
-                  <calcite-radio-button name="firstCheckedWinsDisabledSingleFirst2" value="2" checked disabled></calcite-radio-button>
+                  <calcite-radio-button name="firstCheckedWinsDisabledSingleFirst2" value="1" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button name="firstCheckedWinsDisabledSingleFirst2" value="2" checked disabled>
+                  </calcite-radio-button>
                   <calcite-radio-button name="firstCheckedWinsDisabledSingleFirst2" value="3"></calcite-radio-button>
 
                   <h3>Only one checked value (first wins, second two checked)</h3>
@@ -131,34 +139,44 @@ <h3>Only one checked value (first wins, second two checked)</h3>
                   <calcite-radio-button name="firstCheckedWinsSecond2" value="3" checked></calcite-radio-button>
                   <hr>
                   <calcite-radio-button name="firstCheckedWinsDisabledSingleSecond2" value="1"></calcite-radio-button>
-                  <calcite-radio-button name="firstCheckedWinsDisabledSingleSecond2" value="2" checked disabled></calcite-radio-button>
-                  <calcite-radio-button name="firstCheckedWinsDisabledSingleSecond2" value="3" checked></calcite-radio-button>
+                  <calcite-radio-button name="firstCheckedWinsDisabledSingleSecond2" value="2" checked disabled>
+                  </calcite-radio-button>
+                  <calcite-radio-button name="firstCheckedWinsDisabledSingleSecond2" value="3" checked>
+                  </calcite-radio-button>
 
                   <h3>Only one checked value (first wins, first and last checked)</h3>
                   <calcite-radio-button name="firstCheckedWinsFirstLast" value="1" checked></calcite-radio-button>
                   <calcite-radio-button name="firstCheckedWinsFirstLast" value="2"></calcite-radio-button>
                   <calcite-radio-button name="firstCheckedWinsFirstLast" value="3" checked></calcite-radio-button>
                   <hr>
-                  <calcite-radio-button name="firstCheckedWinsDisabledSingleFirstLast" value="1" checked></calcite-radio-button>
-                  <calcite-radio-button name="firstCheckedWinsDisabledSingleFirstLast" value="2" disabled></calcite-radio-button>
-                  <calcite-radio-button name="firstCheckedWinsDisabledSingleFirstLast" value="3" checked></calcite-radio-button>
+                  <calcite-radio-button name="firstCheckedWinsDisabledSingleFirstLast" value="1" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button name="firstCheckedWinsDisabledSingleFirstLast" value="2" disabled>
+                  </calcite-radio-button>
+                  <calcite-radio-button name="firstCheckedWinsDisabledSingleFirstLast" value="3" checked>
+                  </calcite-radio-button>
 
                   <h3>Only one checked value (first wins, all checked)</h3>
                   <calcite-radio-button name="firstCheckedWinsAll" value="1" checked></calcite-radio-button>
                   <calcite-radio-button name="firstCheckedWinsAll" value="2" checked></calcite-radio-button>
                   <calcite-radio-button name="firstCheckedWinsAll" value="3" checked></calcite-radio-button>
                   <hr>
-                  <calcite-radio-button name="firstCheckedWinsAllDisabledSingle" value="1" checked></calcite-radio-button>
-                  <calcite-radio-button name="firstCheckedWinsAllDisabledSingle" value="2" checked disabled></calcite-radio-button>
-                  <calcite-radio-button name="firstCheckedWinsAllDisabledSingle" value="3" checked></calcite-radio-button>
+                  <calcite-radio-button name="firstCheckedWinsAllDisabledSingle" value="1" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button name="firstCheckedWinsAllDisabledSingle" value="2" checked disabled>
+                  </calcite-radio-button>
+                  <calcite-radio-button name="firstCheckedWinsAllDisabledSingle" value="3" checked>
+                  </calcite-radio-button>
 
-              </div>
-              <div class="dark">
+                </div>
+                <div class="dark">
                   <h3>Scale s</h3>
-                  <calcite-radio-button theme="dark" name="s-dark" scale="s" value="stencil" checked>Stencil</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="s-dark" scale="s" value="stencil" checked>Stencil
+                  </calcite-radio-button>
                   <calcite-radio-button theme="dark" name="s-dark" scale="s" value="react">React</calcite-radio-button>
                   <calcite-radio-button theme="dark" name="s-dark" scale="s" value="ember">Ember</calcite-radio-button>
-                  <calcite-radio-button theme="dark" name="s-dark" scale="s" value="angular">Angular</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="s-dark" scale="s" value="angular">Angular
+                  </calcite-radio-button>
 
                   <hr>
 
@@ -166,100 +184,142 @@ <h3>Scale s</h3>
                     Stencil</calcite-radio-button>
                   <calcite-radio-button theme="dark" name="s-dark-disabled-single" scale="s" value="react" disabled>
                     React</calcite-radio-button>
-                  <calcite-radio-button theme="dark" name="s-dark-disabled-single" scale="s" value="ember">Ember</calcite-radio-button>
-                  <calcite-radio-button theme="dark" name="s-dark-disabled-single" scale="s" value="angular">Angular</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="s-dark-disabled-single" scale="s" value="ember">Ember
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="s-dark-disabled-single" scale="s" value="angular">Angular
+                  </calcite-radio-button>
 
                   <h3>Scale m (default)</h3>
-                  <calcite-radio-button theme="dark" name="m-dark" value="stencil" checked>Stencil</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="m-dark" value="stencil" checked>Stencil
+                  </calcite-radio-button>
                   <calcite-radio-button theme="dark" name="m-dark" value="react">React</calcite-radio-button>
                   <calcite-radio-button theme="dark" name="m-dark" value="ember">Ember</calcite-radio-button>
                   <calcite-radio-button theme="dark" name="m-dark" value="angular">Angular</calcite-radio-button>
 
                   <hr>
 
-                  <calcite-radio-button theme="dark" name="m-dark-disabled-single" value="stencil" checked>Stencil</calcite-radio-button>
-                  <calcite-radio-button theme="dark" name="m-dark-disabled-single" value="react" disabled>React</calcite-radio-button>
-                  <calcite-radio-button theme="dark" name="m-dark-disabled-single" value="ember">Ember</calcite-radio-button>
-                  <calcite-radio-button theme="dark" name="m-dark-disabled-single" value="angular">Angular</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="m-dark-disabled-single" value="stencil" checked>Stencil
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="m-dark-disabled-single" value="react" disabled>React
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="m-dark-disabled-single" value="ember">Ember
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="m-dark-disabled-single" value="angular">Angular
+                  </calcite-radio-button>
 
                   <h3>Scale l</h3>
-                    <calcite-radio-button theme="dark" name="l-dark" scale="l" value="stencil" checked>Stencil</calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="l-dark" scale="l" value="react">React</calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="l-dark" scale="l" value="ember">Ember</calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="l-dark" scale="l" value="angular">Angular</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="l-dark" scale="l" value="stencil" checked>Stencil
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="l-dark" scale="l" value="react">React</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="l-dark" scale="l" value="ember">Ember</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="l-dark" scale="l" value="angular">Angular
+                  </calcite-radio-button>
 
-                    <hr>
+                  <hr>
 
-                    <calcite-radio-button theme="dark" name="l-dark-disabled-single" scale="l" value="stencil" checked>Stencil</calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="l-dark-disabled-single" scale="l" value="react" disabled>React</calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="l-dark-disabled-single" scale="l" value="ember">Ember</calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="l-dark-disabled-single" scale="l" value="angular">Angular</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="l-dark-disabled-single" scale="l" value="stencil" checked>
+                    Stencil</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="l-dark-disabled-single" scale="l" value="react" disabled>
+                    React</calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="l-dark-disabled-single" scale="l" value="ember">Ember
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="l-dark-disabled-single" scale="l" value="angular">Angular
+                  </calcite-radio-button>
 
                   <h3>Uses value as label if missing</h3>
-                    <calcite-radio-button theme="dark" name="valueAsLabelDark" value="1" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="valueAsLabelDark" value="2"></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="valueAsLabelDark" value="3"></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="valueAsLabelDark" value="1" checked></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="valueAsLabelDark" value="2"></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="valueAsLabelDark" value="3"></calcite-radio-button>
 
-                    <hr>
+                  <hr>
 
-                    <calcite-radio-button theme="dark" name="valueAsLabelDarkDisabledSingle" value="1" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="valueAsLabelDarkDisabledSingle" value="2" disabled></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="valueAsLabelDarkDisabledSingle" value="3"></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="valueAsLabelDarkDisabledSingle" value="1" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="valueAsLabelDarkDisabledSingle" value="2" disabled>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="valueAsLabelDarkDisabledSingle" value="3">
+                  </calcite-radio-button>
 
                   <h3>None checked</h3>
-                    <calcite-radio-button theme="dark" name="noneCheckedDark" value="1"></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="noneCheckedDark" value="2"></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="noneCheckedDark" value="3"></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="noneCheckedDark" value="1"></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="noneCheckedDark" value="2"></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="noneCheckedDark" value="3"></calcite-radio-button>
 
-                    <hr>
+                  <hr>
 
-                    <calcite-radio-button theme="dark" name="noneCheckedDarkDisabledSingle" value="1"></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="noneCheckedDarkDisabledSingle" value="2" disabled></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="noneCheckedDarkDisabledSingle" value="3"></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="noneCheckedDarkDisabledSingle" value="1">
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="noneCheckedDarkDisabledSingle" value="2" disabled>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="noneCheckedDarkDisabledSingle" value="3">
+                  </calcite-radio-button>
 
                   <h3>Only one checked value (first wins, first two checked)</h3>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirst2" value="1" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirst2" value="2" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirst2" value="3"></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirst2" value="1" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirst2" value="2" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirst2" value="3"></calcite-radio-button>
 
-                    <hr>
+                  <hr>
 
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirst2" value="1" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirst2" value="2" checked disabled></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirst2" value="3"></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirst2" value="1" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirst2" value="2" checked
+                    disabled></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirst2" value="3">
+                  </calcite-radio-button>
 
                   <h3>Only one checked value (first wins, second two checked)</h3>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkSecond2" value="1"></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkSecond2" value="2" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkSecond2" value="3" checked></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkSecond2" value="1">
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkSecond2" value="2" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkSecond2" value="3" checked>
+                  </calcite-radio-button>
 
-                    <hr>
+                  <hr>
 
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleSecond2" value="1"></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleSecond2" value="2" checked disabled></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleSecond2" value="3" checked></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleSecond2" value="1">
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleSecond2" value="2" checked
+                    disabled></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleSecond2" value="3" checked>
+                  </calcite-radio-button>
 
                   <h3>Only one checked value (first wins, first and last checked)</h3>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirstLast" value="1" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirstLast" value="2"></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirstLast" value="3" checked></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirstLast" value="1" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirstLast" value="2">
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkFirstLast" value="3" checked>
+                  </calcite-radio-button>
 
-                    <hr>
+                  <hr>
 
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirstLast" value="1" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirstLast" value="2" disabled></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirstLast" value="3" checked></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirstLast" value="1"
+                    checked></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirstLast" value="2"
+                    disabled></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkDisabledSingleFirstLast" value="3"
+                    checked></calcite-radio-button>
 
                   <h3>Only one checked value (first wins, all checked)</h3>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAll" value="1" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAll" value="2" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAll" value="3" checked></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAll" value="1" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAll" value="2" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAll" value="3" checked>
+                  </calcite-radio-button>
 
-                    <hr>
+                  <hr>
 
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAllDisabledSingle" value="1" checked></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAllDisabledSingle" value="2" checked disabled></calcite-radio-button>
-                    <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAllDisabledSingle" value="3" checked></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAllDisabledSingle" value="1" checked>
+                  </calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAllDisabledSingle" value="2" checked
+                    disabled></calcite-radio-button>
+                  <calcite-radio-button theme="dark" name="firstCheckedWinsDarkAllDisabledSingle" value="3" checked>
+                  </calcite-radio-button>
 
                 </div>
               </div>
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index c842de458d6..6b4945e1917 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -7,11 +7,25 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Calcite Slider</title>
   <style>
+    body {
+      margin: 0;
+    }
+    .demo-background-light {
+      border-top: 1px solid #202020;
+      border-right: 1px solid #202020;
+      border-bottom: 1px solid #202020;
+      padding: 1rem;
+    }
     .demo-background-dark {
       background: #202020;
       color: white;
       padding: 1rem;
     }
+    .two-columns {
+      display: grid;
+      grid-template-columns: 350px 350px;
+      grid-gap: 20px;
+    }
 
     h3 {
       margin-top: 24px;
@@ -21,218 +35,451 @@
   <link rel="stylesheet" href="../build/calcite.css" />
   <script type="module" src="../build/calcite.esm.js"></script>
   <script nomodule src="../build/calcite.js"></script>
+  <script type="module" src="./helpers/demo-form.js"></script>
+  <script type="module" src="./helpers/demo-spacer.js"></script>
 </head>
 
 <body>
+
   <calcite-button href="/">Home</calcite-button>
   <h1>Calcite Slider</h1>
 
-  <h2>Single Value</h2>
+  <div class="two-columns">
+    <div class="demo-background-light">
+      <h2>Single Value</h2>
 
-  <h3>Handle</h3>
-  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature"></calcite-slider>
+      <demo-spacer>
 
-  <h3>Labeled Handle</h3>
-  <calcite-slider min="100" max="1000" value="1000" step="10" label="Temperature" label-handles></calcite-slider>
+        <h3>Handle</h3>
+        <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature"></calcite-slider>
 
-  <h3>Precise Handle</h3>
-  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise></calcite-slider>
+        <h3>Labeled Handle</h3>
+        <calcite-slider min="100" max="1000" value="1000" step="10" label="Temperature" label-handles></calcite-slider>
 
-  <h3>Precise Labeled Handle</h3>
-  <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise label-handles>
-  </calcite-slider>
+        <h3>Precise Handle</h3>
+        <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise>
+        </calcite-slider>
 
-  <h3>Ticks</h3>
-  <calcite-slider min="0" max="100" value="20" step="10" ticks="10" label="Temperature"></calcite-slider>
+        <h3>Precise Labeled Handle</h3>
+        <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise label-handles>
+        </calcite-slider>
 
-  <h3>Ticks with Labeled Handle</h3>
-  <calcite-slider min="0" max="100" value="40" step="10" ticks="10" label="Temperature" label-handles></calcite-slider>
+        <h3>Ticks</h3>
+        <calcite-slider min="0" max="100" value="20" step="10" ticks="10" label="Temperature"></calcite-slider>
 
-  <h3>Ticks with Precise Handle</h3>
-  <calcite-slider min="0" max="100" value="50" step="10" ticks="10" label="Temperature" precise></calcite-slider>
+        <h3>Ticks with Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="40" step="10" ticks="10" label="Temperature" label-handles>
+        </calcite-slider>
 
-  <h3>Ticks with Precise Labeled Handle</h3>
-  <calcite-slider min="0" max="100" value="60" step="10" ticks="10" label="Temperature" label-handles precise></calcite-slider>
+        <h3>Ticks with Precise Handle</h3>
+        <calcite-slider min="0" max="100" value="50" step="10" ticks="10" label="Temperature" precise></calcite-slider>
 
-  <h3>Labeled Ticks</h3>
-  <calcite-slider min="0" max="100" value="20" step="10" ticks="10" label-ticks label="Temperature"></calcite-slider>
+        <h3>Ticks with Precise Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" ticks="10" label="Temperature" label-handles precise>
+        </calcite-slider>
 
-  <h3>Labeled Ticks with Labeled Handle</h3>
-  <calcite-slider min="0" max="100" value="40" step="10" ticks="10" label="Temperature" label-handles label-ticks></calcite-slider>
+        <h3>Labeled Ticks</h3>
+        <calcite-slider min="0" max="100" value="20" step="10" ticks="10" label-ticks label="Temperature">
+        </calcite-slider>
 
-  <h3>Labeled Ticks with Precise Handle</h3>
-  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks precise label="Temperature">
-  </calcite-slider>
+        <h3>Labeled Ticks with Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="40" step="10" ticks="10" label="Temperature" label-handles label-ticks>
+        </calcite-slider>
 
-  <h3>Labeled Ticks with Precise Labeled Handle</h3>
-  <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-handles label-ticks precise
-    label="Temperature"></calcite-slider>
+        <h3>Labeled Ticks with Precise Handle</h3>
+        <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks precise label="Temperature">
+        </calcite-slider>
 
-  <h3>Disabled</h3>
-  <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled></calcite-slider>
+        <h3>Labeled Ticks with Precise Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-handles label-ticks precise
+          label="Temperature"></calcite-slider>
 
-  <div style="max-width: 400px">
-    <h3>Histogram</h3>
-    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
+        <h3>Disabled</h3>
+        <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled></calcite-slider>
 
-    <h3>Histogram with Labeled Handle</h3>
-    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" label-handles></calcite-slider>
+        <h3>Histogram</h3>
+        <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
 
-    <h3>Histogram with Precise Handle</h3>
-    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" precise></calcite-slider>
+        <h3>Histogram with Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" label-handles></calcite-slider>
 
-    <h3>Histogram with Precise Labeled Handle</h3>
-    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" label-handles precise></calcite-slider>
+        <h3>Histogram with Precise Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" precise></calcite-slider>
 
-    <h3>Histogram with Ticks</h3>
-    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10"></calcite-slider>
+        <h3>Histogram with Precise Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" label-handles precise>
+        </calcite-slider>
 
-    <h3>Histogram with Ticks and Labeled Handle</h3>
-    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles></calcite-slider>
+        <h3>Histogram with Ticks</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10"></calcite-slider>
 
-    <h3>Histogram with Ticks and Precise Handle</h3>
-    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" precise></calcite-slider>
+        <h3>Histogram with Ticks and Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles>
+        </calcite-slider>
 
-    <h3>Histogram with Ticks and Precise Labeled Handle</h3>
-    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles precise></calcite-slider>
+        <h3>Histogram with Ticks and Precise Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" precise></calcite-slider>
 
-    <h3>Histogram with Labeled Ticks</h3>
-    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-ticks></calcite-slider>
+        <h3>Histogram with Ticks and Precise Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles precise>
+        </calcite-slider>
 
-    <h3>Histogram with Labeled Ticks and Labeled Handle</h3>
-    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles label-ticks></calcite-slider>
+        <h3>Histogram with Labeled Ticks</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-ticks>
+        </calcite-slider>
 
-    <h3>Histogram with Labeled Ticks and Precise Handle</h3>
-    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-ticks precise>
-    </calcite-slider>
+        <h3>Histogram with Labeled Ticks and Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles
+          label-ticks>
+        </calcite-slider>
 
-    <h3>Histogram with Labeled Ticks and Precise Labeled Handle</h3>
-    <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles label-ticks
-      precise></calcite-slider>
+        <h3>Histogram with Labeled Ticks and Precise Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-ticks precise>
+        </calcite-slider>
 
-    <h3>Histogram Disabled</h3>
-    <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" disabled></calcite-slider>
-  </div>
+        <h3>Histogram with Labeled Ticks and Precise Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles label-ticks
+          precise></calcite-slider>
 
-  <h2>Range</h2>
+        <h3>Histogram Disabled</h3>
+        <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" disabled></calcite-slider>
+      </demo-spacer>
 
-  <h3>Handles</h3>
-  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
-    min-label="Temperature range (lower)" max-label="Temperature range (upper)"></calcite-slider>
+      <h2>Range</h2>
 
-  <h3>Labeled Handles</h3>
-  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
-    min-label="Temperature range (lower)" max-label="Temperature range (upper)" label-handles></calcite-slider>
+      <demo-spacer>
+        <h3>Handles</h3>
+        <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)"></calcite-slider>
+
+        <h3>Labeled Handles</h3>
+        <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" label-handles></calcite-slider>
+
+        <h3>Precise Handles</h3>
+        <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise></calcite-slider>
+
+        <h3>Precise Labeled Handles</h3>
+        <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise label-handles>
+        </calcite-slider>
+
+        <h3>Ticks</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature">
+        </calcite-slider>
+
+        <h3>Ticks with Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature"
+          label-handles></calcite-slider>
+
+        <h3>Ticks with Precise Handles</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature"
+          precise>
+        </calcite-slider>
+
+        <h3>Ticks with Precise Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature"
+          label-handles precise>
+        </calcite-slider>
+
+        <h3>Labeled Ticks</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature"
+          label-ticks>
+        </calcite-slider>
+
+        <h3>Labeled Ticks with Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature"
+          label-handles label-ticks></calcite-slider>
+
+        <h3>Labeled Ticks with Precise Handles</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise
+          label-ticks></calcite-slider>
+
+        <h3>Labeled Ticks with Precise Labeled Handles</h3>
+        <calcite-slider min="10000" max="100000" min-value="30000" max-value="80000" step="10000" ticks="10000"
+          label="Temperature" precise label-handles label-ticks></calcite-slider>
+
+        <h3>Histogram</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+          max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
+
+        <h3>Histogram with Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+          max-label="Temperature range (upper)" class="js-histogram" label-handles></calcite-slider>
+
+        <h3>Histogram with Precise Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+          max-label="Temperature range (upper)" class="js-histogram" precise></calcite-slider>
+
+        <h3>Histogram with Precise Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+          max-label="Temperature range (upper)" class="js-histogram" precise label-handles></calcite-slider>
+
+        <h3>Histogram with Ticks</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram">
+        </calcite-slider>
+
+        <h3>Histogram with Ticks and Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram"
+          label-handles>
+        </calcite-slider>
+
+        <h3>Histogram with Ticks and Precise Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" precise>
+        </calcite-slider>
+
+        <h3>Histogram with Ticks and Precise Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles
+          precise>
+        </calcite-slider>
+
+        <h3>Histogram with Labeled Ticks</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-ticks>
+        </calcite-slider>
+
+        <h3>Histogram with Labeled Ticks and Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles
+          label-ticks>
+        </calcite-slider>
+
+        <h3>Histogram with Labeled Ticks and Precise Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-ticks
+          precise>
+        </calcite-slider>
+
+        <h3>Histogram with Labeled Ticks and Precise Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles
+          label-ticks precise>
+        </calcite-slider>
+
+      </demo-spacer>
+    </div>
 
-  <h3>Precise Handles</h3>
-  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
-    min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise></calcite-slider>
+    <div class="demo-background-dark" theme="dark">
 
-  <h3>Precise Labeled Handles</h3>
-  <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
-    min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise label-handles></calcite-slider>
+      <h2>Single Value</h2>
 
-  <h3>Ticks</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature">
-  </calcite-slider>
+      <demo-spacer>
 
-  <h3>Ticks with Labeled Handles</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-handles></calcite-slider>
+        <h3>Handle</h3>
+        <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature"></calcite-slider>
 
-  <h3>Ticks with Precise Handles</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise>
-  </calcite-slider>
+        <h3>Labeled Handle</h3>
+        <calcite-slider min="100" max="1000" value="1000" step="10" label="Temperature" label-handles></calcite-slider>
 
-  <h3>Ticks with Precise Labeled Handles</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-handles precise>
-  </calcite-slider>
+        <h3>Precise Handle</h3>
+        <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise>
+        </calcite-slider>
 
-  <h3>Labeled Ticks</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-ticks>
-  </calcite-slider>
+        <h3>Precise Labeled Handle</h3>
+        <calcite-slider min="10000" max="100000" value="100000" step="1000" label="Temperature" precise label-handles>
+        </calcite-slider>
 
-  <h3>Labeled Ticks with Labeled Handles</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-handles label-ticks></calcite-slider>
+        <h3>Ticks</h3>
+        <calcite-slider min="0" max="100" value="20" step="10" ticks="10" label="Temperature"></calcite-slider>
 
-  <h3>Labeled Ticks with Precise Handles</h3>
-  <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise
-    label-ticks></calcite-slider>
+        <h3>Ticks with Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="40" step="10" ticks="10" label="Temperature" label-handles>
+        </calcite-slider>
 
-  <h3>Labeled Ticks with Precise Labeled Handles</h3>
-  <calcite-slider min="10000" max="100000" min-value="30000" max-value="80000" step="10000" ticks="10000"
-    label="Temperature" precise label-handles label-ticks></calcite-slider>
+        <h3>Ticks with Precise Handle</h3>
+        <calcite-slider min="0" max="100" value="50" step="10" ticks="10" label="Temperature" precise></calcite-slider>
 
-  <div style="max-width: 400px">
+        <h3>Ticks with Precise Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" ticks="10" label="Temperature" label-handles precise>
+        </calcite-slider>
 
-    <h3>Histogram</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
-      max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
+        <h3>Labeled Ticks</h3>
+        <calcite-slider min="0" max="100" value="20" step="10" ticks="10" label-ticks label="Temperature">
+        </calcite-slider>
 
-    <h3>Histogram with Labeled Handles</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
-      max-label="Temperature range (upper)" class="js-histogram" label-handles></calcite-slider>
+        <h3>Labeled Ticks with Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="40" step="10" ticks="10" label="Temperature" label-handles label-ticks>
+        </calcite-slider>
 
-    <h3>Histogram with Precise Handles</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
-      max-label="Temperature range (upper)" class="js-histogram" precise></calcite-slider>
+        <h3>Labeled Ticks with Precise Handle</h3>
+        <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-ticks precise label="Temperature">
+        </calcite-slider>
 
-    <h3>Histogram with Precise Labeled Handles</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
-      max-label="Temperature range (upper)" class="js-histogram" precise label-handles></calcite-slider>
+        <h3>Labeled Ticks with Precise Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="23" step="10" ticks="10" label-handles label-ticks precise
+          label="Temperature"></calcite-slider>
 
-    <h3>Histogram with Ticks</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
-      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
+        <h3>Disabled</h3>
+        <calcite-slider min="0" max="100" value="40" step="1" label="Temperature" disabled></calcite-slider>
 
-    <h3>Histogram with Ticks and Labeled Handles</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
-      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles></calcite-slider>
+        <h3>Histogram</h3>
+        <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram"></calcite-slider>
 
-    <h3>Histogram with Ticks and Precise Handles</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
-      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" precise>
-    </calcite-slider>
+        <h3>Histogram with Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" label-handles></calcite-slider>
 
-    <h3>Histogram with Ticks and Precise Labeled Handles</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
-      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles precise>
-    </calcite-slider>
+        <h3>Histogram with Precise Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" precise></calcite-slider>
 
-    <h3>Histogram with Labeled Ticks</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
-      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-ticks>
-    </calcite-slider>
+        <h3>Histogram with Precise Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" label-handles precise>
+        </calcite-slider>
 
-    <h3>Histogram with Labeled Ticks and Labeled Handles</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
-      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles label-ticks>
-    </calcite-slider>
+        <h3>Histogram with Ticks</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10"></calcite-slider>
 
-    <h3>Histogram with Labeled Ticks and Precise Handles</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
-      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-ticks precise>
-    </calcite-slider>
+        <h3>Histogram with Ticks and Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles>
+        </calcite-slider>
 
-    <h3>Histogram with Labeled Ticks and Precise Labeled Handles</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
-      min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles label-ticks precise>
-    </calcite-slider>
-  </div>
+        <h3>Histogram with Ticks and Precise Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" precise></calcite-slider>
 
-  <div class="demo-background-dark" theme="dark">
+        <h3>Histogram with Ticks and Precise Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles precise>
+        </calcite-slider>
 
-    <h3>Dark Theme</h3>
-    <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
-      max-label="Temperature range (upper)" theme="dark" label-ticks ticks="10"></calcite-slider>
+        <h3>Histogram with Labeled Ticks</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-ticks>
+        </calcite-slider>
 
-    <div style="max-width: 400px">
+        <h3>Histogram with Labeled Ticks and Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles label-ticks>
+        </calcite-slider>
 
-      <h3>Histogram Range</h3>
-      <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
-        max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
+        <h3>Histogram with Labeled Ticks and Precise Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-ticks precise>
+        </calcite-slider>
 
-    </div>
+        <h3>Histogram with Labeled Ticks and Precise Labeled Handle</h3>
+        <calcite-slider min="0" max="100" value="60" step="10" class="js-histogram" ticks="10" label-handles label-ticks
+          precise></calcite-slider>
+
+        <h3>Histogram Disabled</h3>
+        <calcite-slider min="0" max="100" value="60" step="1" class="js-histogram" disabled></calcite-slider>
+      </demo-spacer>
+
+      <h2>Range</h2>
 
+      <demo-spacer>
+        <h3>Handles</h3>
+        <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)"></calcite-slider>
+
+        <h3>Labeled Handles</h3>
+        <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" label-handles></calcite-slider>
+
+        <h3>Precise Handles</h3>
+        <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise></calcite-slider>
+
+        <h3>Precise Labeled Handles</h3>
+        <calcite-slider min="10000" max="100000" min-value="10000" max-value="100000" step="1000" step="1"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" precise label-handles>
+        </calcite-slider>
+
+        <h3>Ticks</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature">
+        </calcite-slider>
+
+        <h3>Ticks with Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature"
+          label-handles></calcite-slider>
+
+        <h3>Ticks with Precise Handles</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise>
+        </calcite-slider>
+
+        <h3>Ticks with Precise Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-handles
+          precise>
+        </calcite-slider>
+
+        <h3>Labeled Ticks</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-ticks>
+        </calcite-slider>
+
+        <h3>Labeled Ticks with Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" label-handles
+          label-ticks></calcite-slider>
+
+        <h3>Labeled Ticks with Precise Handles</h3>
+        <calcite-slider min="0" max="100" min-value="20" max-value="80" step="10" ticks="10" label="Temperature" precise
+          label-ticks></calcite-slider>
+
+        <h3>Labeled Ticks with Precise Labeled Handles</h3>
+        <calcite-slider min="10000" max="100000" min-value="30000" max-value="80000" step="10000" ticks="10000"
+          label="Temperature" precise label-handles label-ticks></calcite-slider>
+
+        <h3>Histogram</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+          max-label="Temperature range (upper)" class="js-histogram"></calcite-slider>
+
+        <h3>Histogram with Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+          max-label="Temperature range (upper)" class="js-histogram" label-handles></calcite-slider>
+
+        <h3>Histogram with Precise Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+          max-label="Temperature range (upper)" class="js-histogram" precise></calcite-slider>
+
+        <h3>Histogram with Precise Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
+          max-label="Temperature range (upper)" class="js-histogram" precise label-handles></calcite-slider>
+
+        <h3>Histogram with Ticks</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram">
+        </calcite-slider>
+
+        <h3>Histogram with Ticks and Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles>
+        </calcite-slider>
+
+        <h3>Histogram with Ticks and Precise Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" precise>
+        </calcite-slider>
+
+        <h3>Histogram with Ticks and Precise Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles
+          precise>
+        </calcite-slider>
+
+        <h3>Histogram with Labeled Ticks</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-ticks>
+        </calcite-slider>
+
+        <h3>Histogram with Labeled Ticks and Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles
+          label-ticks>
+        </calcite-slider>
+
+        <h3>Histogram with Labeled Ticks and Precise Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-ticks
+          precise>
+        </calcite-slider>
+
+        <h3>Histogram with Labeled Ticks and Precise Labeled Handles</h3>
+        <calcite-slider min="0" max="100" min-value="50" max-value="80" step="10" ticks="10"
+          min-label="Temperature range (lower)" max-label="Temperature range (upper)" class="js-histogram" label-handles
+          label-ticks precise>
+        </calcite-slider>
+
+      </demo-spacer>
+
+    </div>
   </div>
 
   <h3>Event Listener</h3>

From 67a522f14be94a719250a29ae9b7aae34d3593c4 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Tue, 9 Jun 2020 16:45:03 -0700
Subject: [PATCH 41/52] Fixing the case where you want the value 0 to stay
 centered over the handle when its on either side of the slider

---
 .../calcite-slider/calcite-slider.e2e.ts      |  6 +-
 .../calcite-slider/calcite-slider.scss        | 22 +++---
 .../calcite-slider/calcite-slider.tsx         | 74 +++++++++++--------
 src/demos/calcite-slider.html                 |  8 +-
 4 files changed, 61 insertions(+), 49 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.e2e.ts b/src/components/calcite-slider/calcite-slider.e2e.ts
index e2c099d2109..12491f577f7 100644
--- a/src/components/calcite-slider/calcite-slider.e2e.ts
+++ b/src/components/calcite-slider/calcite-slider.e2e.ts
@@ -48,8 +48,8 @@ describe("calcite-slider", () => {
       >
       </calcite-slider>
     `);
-    const maxButton = await page.find("calcite-slider >>> .thumb--max");
-    const minButton = await page.find("calcite-slider >>> .thumb--min");
+    const maxButton = await page.find("calcite-slider >>> .thumb--value");
+    const minButton = await page.find("calcite-slider >>> .thumb--minValue");
     expect(minButton).toEqualAttribute("role", "slider");
     expect(maxButton).toEqualAttribute("role", "slider");
     expect(minButton).toEqualAttribute("aria-label", "Min Label");
@@ -112,7 +112,7 @@ describe("calcite-slider", () => {
       </calcite-slider>
     `);
     const slider = await page.find("calcite-slider");
-    const handle = await page.find("calcite-slider >>> .thumb--max");
+    const handle = await page.find("calcite-slider >>> .thumb--value");
     await page.waitForChanges();
     let value = await slider.getProperty("value");
     expect(value).toBe(20);
diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index df9e312c32b..a2bfd591c94 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -117,14 +117,14 @@ $tick-height: 4px;
     }
   }
 }
-.thumb--min {
+.thumb--minValue {
   transform: translate(-7px, -8px);
 }
 :host([label-handles]) {
   .thumb {
     transform: translate(50%, -25px);
   }
-  .thumb--min {
+  .thumb--minValue {
     transform: translate(-50%, -25px);
   }
 }
@@ -136,7 +136,7 @@ $tick-height: 4px;
       margin-top: 5px;
     }
   }
-  .thumb--min {
+  .thumb--minValue {
     transform: translate(-50%, -8px);
   }
 }
@@ -144,7 +144,7 @@ $tick-height: 4px;
   .thumb {
     transform: translate(7px, -21px);
   }
-  .thumb--min {
+  .thumb--minValue {
     transform: translate(-7px, -2px);
     .handle__label {
       margin-bottom: unset;
@@ -156,7 +156,7 @@ $tick-height: 4px;
   .thumb {
     transform: translate(7px, -2px);
   }
-  .thumb--min {
+  .thumb--minValue {
     transform: translate(-50%, -2px);
   }
 }
@@ -164,7 +164,7 @@ $tick-height: 4px;
   .thumb {
     transform: translate(7px, -20px);
   }
-  .thumb--min {
+  .thumb--minValue {
     transform: translate(-7px, -3px);
   }
 }
@@ -172,7 +172,7 @@ $tick-height: 4px;
   .thumb {
     transform: translate(7px, -3px);
   }
-  .thumb--min {
+  .thumb--minValue {
     transform: translate(-50%, -3px);
   }
 }
@@ -180,7 +180,7 @@ $tick-height: 4px;
   .thumb {
     transform: translate(50%, -38px);
   }
-  .thumb--min {
+  .thumb--minValue {
     transform: translate(-50%, -2px);
   }
 }
@@ -188,7 +188,7 @@ $tick-height: 4px;
   .thumb {
     transform: translate(50%, -2px);
   }
-  .thumb--min {
+  .thumb--minValue {
     transform: translate(-50%, -2px);
   }
 }
@@ -196,7 +196,7 @@ $tick-height: 4px;
   .thumb {
     transform: translate(50%, -37px);
   }
-  .thumb--min {
+  .thumb--minValue {
     transform: translate(-50%, -3px);
   }
 }
@@ -204,7 +204,7 @@ $tick-height: 4px;
   .thumb {
     transform: translate(50%, -3px);
   }
-  .thumb--min {
+  .thumb--minValue {
     transform: translate(-50%, -3px);
   }
 }
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 430d06851b4..37580aaadda 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -127,7 +127,7 @@ export class CalciteSlider {
         style={{ right }}
         class={{
           thumb: true,
-          "thumb--max": true,
+          "thumb--value": true,
           "thumb--active":
             this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         }}
@@ -153,7 +153,7 @@ export class CalciteSlider {
         style={{ right }}
         class={{
           thumb: true,
-          "thumb--max": true,
+          "thumb--value": true,
           "thumb--active":
             this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         }}
@@ -188,7 +188,7 @@ export class CalciteSlider {
         style={{ right }}
         class={{
           thumb: true,
-          "thumb--max": true,
+          "thumb--value": true,
           "thumb--active":
             this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         }}
@@ -223,7 +223,7 @@ export class CalciteSlider {
         style={{ right }}
         class={{
           thumb: true,
-          "thumb--max": true,
+          "thumb--value": true,
           "thumb--active":
             this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
           "thumb--precise": true,
@@ -251,7 +251,7 @@ export class CalciteSlider {
         style={{ right }}
         class={{
           thumb: true,
-          "thumb--max": true,
+          "thumb--value": true,
           "thumb--active":
             this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
           "thumb--precise": true,
@@ -279,7 +279,7 @@ export class CalciteSlider {
         style={{ right }}
         class={{
           thumb: true,
-          "thumb--max": true,
+          "thumb--value": true,
           "thumb--active":
             this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
           "thumb--precise": true,
@@ -316,7 +316,7 @@ export class CalciteSlider {
         style={{ right }}
         class={{
           thumb: true,
-          "thumb--max": true,
+          "thumb--value": true,
           "thumb--active":
             this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
           "thumb--precise": true,
@@ -353,7 +353,7 @@ export class CalciteSlider {
         style={{ left }}
         class={{
           thumb: true,
-          "thumb--min": true,
+          "thumb--minValue": true,
           "thumb--active": this.dragProp === "minValue",
         }}
       >
@@ -378,7 +378,7 @@ export class CalciteSlider {
         style={{ left }}
         class={{
           thumb: true,
-          "thumb--min": true,
+          "thumb--minValue": true,
           "thumb--active": this.dragProp === "minValue",
         }}
       >
@@ -412,7 +412,7 @@ export class CalciteSlider {
         style={{ left }}
         class={{
           thumb: true,
-          "thumb--min": true,
+          "thumb--minValue": true,
           "thumb--active": this.dragProp === "minValue",
         }}
       >
@@ -446,7 +446,7 @@ export class CalciteSlider {
         style={{ left }}
         class={{
           thumb: true,
-          "thumb--min": true,
+          "thumb--minValue": true,
           "thumb--active": this.dragProp === "minValue",
           "thumb--precise": true,
         }}
@@ -473,7 +473,7 @@ export class CalciteSlider {
         style={{ left }}
         class={{
           thumb: true,
-          "thumb--min": true,
+          "thumb--minValue": true,
           "thumb--active": this.dragProp === "minValue",
           "thumb--precise": true,
         }}
@@ -923,20 +923,21 @@ export class CalciteSlider {
   }
   private adjustObscuredHandleLabel(name: "value" | "minValue") {
     if (this.labelHandles) {
-      const element = this.el.shadowRoot.querySelector(
+      const handle: HTMLButtonElement | null = this.el.shadowRoot.querySelector(
+        `.thumb--${name}`
+      );
+      const label: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
         `.handle__label--${name}`
       );
-      const elementCopy = this.el.shadowRoot.querySelector(
+      const labelCopy: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
         `.handle__label--${name}.copy`
       );
-      if (element && elementCopy) {
-        const isOutOfViewport = this.isOutOfViewport(
-          elementCopy as HTMLElement
-        );
-        if (isOutOfViewport) {
-          (element as HTMLElement).style.transform = `translateX(${isOutOfViewport}px)`;
+      if (handle && label && labelCopy) {
+        const labelOffset = this.getLabelOffset(handle, labelCopy);
+        if (labelOffset) {
+          (label as HTMLSpanElement).style.transform = `translateX(${labelOffset}px)`;
         } else {
-          (element as HTMLElement).style.transform = "";
+          (label as HTMLSpanElement).style.transform = "";
         }
       }
     }
@@ -981,8 +982,8 @@ export class CalciteSlider {
       return;
     }
 
-    const minHandle = this.el.shadowRoot.querySelector(".thumb--min");
-    const maxHandle = this.el.shadowRoot.querySelector(".thumb--max");
+    const minHandle = this.el.shadowRoot.querySelector(".thumb--minValue");
+    const maxHandle = this.el.shadowRoot.querySelector(".thumb--value");
 
     const minTickLabel: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
       ".tick__label--min"
@@ -1025,20 +1026,31 @@ export class CalciteSlider {
     }
   }
   /**
-   * Checks if an element is out of the viewport on either the left or right side
+   * Returns an integer representing the number of pixels to offset handle labels based on desired position behavior.
    * @internal
    */
-  private isOutOfViewport(element: HTMLElement): number {
-    const bounding = element.getBoundingClientRect();
-    if (bounding.left < 0) {
-      const offset = Math.abs(bounding.left);
+  private getLabelOffset(
+    handle: HTMLButtonElement,
+    label: HTMLSpanElement
+  ): number {
+    const handleBounds = handle.getBoundingClientRect();
+    const labelBounds = label.getBoundingClientRect();
+    const hostBounds = this.el.getBoundingClientRect();
+    if (
+      handleBounds.left < labelBounds.left ||
+      handleBounds.right > labelBounds.right
+    ) {
+      return 0;
+    }
+    if (labelBounds.left < hostBounds.left) {
+      const offset = Math.floor(hostBounds.left - labelBounds.left - 7);
       return offset;
     }
     if (
-      bounding.right >
-      (window.innerWidth || document.documentElement.clientWidth)
+      labelBounds.right > hostBounds.right ||
+      labelBounds.right > handleBounds.right
     ) {
-      const offset = Math.floor(-(bounding.right - window.innerWidth + 1));
+      const offset = Math.floor(-(labelBounds.right - hostBounds.right) + 7);
       return offset;
     }
     return 0;
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 6b4945e1917..272219e73c8 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -8,12 +8,10 @@
   <title>Calcite Slider</title>
   <style>
     body {
-      margin: 0;
+      margin: 20px;
     }
     .demo-background-light {
-      border-top: 1px solid #202020;
-      border-right: 1px solid #202020;
-      border-bottom: 1px solid #202020;
+      border: 1px solid #202020;
       padding: 1rem;
     }
     .demo-background-dark {
@@ -70,6 +68,8 @@ <h3>Ticks</h3>
         <h3>Ticks with Labeled Handle</h3>
         <calcite-slider min="0" max="100" value="40" step="10" ticks="10" label="Temperature" label-handles>
         </calcite-slider>
+        <calcite-slider min="-100" max="0" value="0" step="10" ticks="10" label="Temperature" label-handles>
+        </calcite-slider>
 
         <h3>Ticks with Precise Handle</h3>
         <calcite-slider min="0" max="100" value="50" step="10" ticks="10" label="Temperature" precise></calcite-slider>

From 3ea6678ba4f458b269bd8d5bf1ac2543e497365b Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Wed, 10 Jun 2020 16:50:08 -0700
Subject: [PATCH 42/52] feature: spacing range labels apart when getting too
 close.  Next step is adding a hyphen and fixing the case where no transform
 is made when value is 0 but the centering of the values still happens

---
 .../calcite-slider/calcite-slider.scss        |   3 +-
 .../calcite-slider/calcite-slider.tsx         | 182 +++++++++++++++---
 2 files changed, 156 insertions(+), 29 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index a2bfd591c94..fd522ad8f8b 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -73,7 +73,8 @@ $tick-height: 4px;
     line-height: 1;
     color: var(--calcite-ui-text-2);
     margin-bottom: 5px;
-    &.copy {
+    &.static,
+    &.transformed {
       opacity: 0;
       position: absolute;
       top: 0;
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 37580aaadda..7fa6344a2c1 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -94,9 +94,12 @@ export class CalciteSlider {
   }
 
   componentDidRender() {
-    this.adjustObscuredHandleLabel("value");
-    if (this.isRange) {
-      this.adjustObscuredHandleLabel("minValue");
+    const valueOffset = this.adjustObscuredEndcapLabel("value");
+    if (this.isRange && this.labelHandles) {
+      const minValueOffset = this.adjustObscuredEndcapLabel("minValue");
+      if (!(this.precise && this.isRange && !this.hasHistogram)) {
+        this.hyphenateCollidingRangeHandleLabels(valueOffset, minValueOffset);
+      }
     }
     this.hideObscuredBoundingTickLabels();
   }
@@ -162,7 +165,13 @@ export class CalciteSlider {
           {value ? value.toLocaleString() : value}
         </span>
         <span
-          class="handle__label handle__label--value copy"
+          class="handle__label handle__label--value static"
+          aria-hidden="true"
+        >
+          {value ? value.toLocaleString() : value}
+        </span>
+        <span
+          class="handle__label handle__label--value transformed"
           aria-hidden="true"
         >
           {value ? value.toLocaleString() : value}
@@ -198,7 +207,13 @@ export class CalciteSlider {
           {value ? value.toLocaleString() : value}
         </span>
         <span
-          class="handle__label handle__label--value copy"
+          class="handle__label handle__label--value static"
+          aria-hidden="true"
+        >
+          {value ? value.toLocaleString() : value}
+        </span>
+        <span
+          class="handle__label handle__label--value transformed"
           aria-hidden="true"
         >
           {value ? value.toLocaleString() : value}
@@ -289,7 +304,13 @@ export class CalciteSlider {
           {value ? value.toLocaleString() : value}
         </span>
         <span
-          class="handle__label handle__label--value copy"
+          class="handle__label handle__label--value static"
+          aria-hidden="true"
+        >
+          {value ? value.toLocaleString() : value}
+        </span>
+        <span
+          class="handle__label handle__label--value transformed"
           aria-hidden="true"
         >
           {value ? value.toLocaleString() : value}
@@ -328,7 +349,13 @@ export class CalciteSlider {
           {value ? value.toLocaleString() : value}
         </span>
         <span
-          class="handle__label handle__label--value copy"
+          class="handle__label handle__label--value static"
+          aria-hidden="true"
+        >
+          {value ? value.toLocaleString() : value}
+        </span>
+        <span
+          class="handle__label handle__label--value transformed"
           aria-hidden="true"
         >
           {value ? value.toLocaleString() : value}
@@ -386,7 +413,13 @@ export class CalciteSlider {
           {this.minValue && this.minValue.toLocaleString()}
         </span>
         <span
-          class="handle__label handle__label--minValue copy"
+          class="handle__label handle__label--minValue static"
+          aria-hidden="true"
+        >
+          {this.minValue && this.minValue.toLocaleString()}
+        </span>
+        <span
+          class="handle__label handle__label--minValue transformed"
           aria-hidden="true"
         >
           {this.minValue && this.minValue.toLocaleString()}
@@ -421,7 +454,13 @@ export class CalciteSlider {
           {this.minValue && this.minValue.toLocaleString()}
         </span>
         <span
-          class="handle__label handle__label--minValue copy"
+          class="handle__label handle__label--minValue static"
+          aria-hidden="true"
+        >
+          {this.minValue && this.minValue.toLocaleString()}
+        </span>
+        <span
+          class="handle__label handle__label--minValue transformed"
           aria-hidden="true"
         >
           {this.minValue && this.minValue.toLocaleString()}
@@ -484,7 +523,13 @@ export class CalciteSlider {
           {this.minValue && this.minValue.toLocaleString()}
         </span>
         <span
-          class="handle__label handle__label--minValue copy"
+          class="handle__label handle__label--minValue static"
+          aria-hidden="true"
+        >
+          {this.minValue && this.minValue.toLocaleString()}
+        </span>
+        <span
+          class="handle__label handle__label--minValue transformed"
           aria-hidden="true"
         >
           {this.minValue && this.minValue.toLocaleString()}
@@ -921,24 +966,93 @@ export class CalciteSlider {
     const range = this.max - this.min;
     return (num - this.min) / range;
   }
-  private adjustObscuredHandleLabel(name: "value" | "minValue") {
-    if (this.labelHandles) {
-      const handle: HTMLButtonElement | null = this.el.shadowRoot.querySelector(
-        `.thumb--${name}`
-      );
-      const label: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
-        `.handle__label--${name}`
-      );
-      const labelCopy: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
-        `.handle__label--${name}.copy`
-      );
-      if (handle && label && labelCopy) {
-        const labelOffset = this.getLabelOffset(handle, labelCopy);
-        if (labelOffset) {
-          (label as HTMLSpanElement).style.transform = `translateX(${labelOffset}px)`;
-        } else {
-          (label as HTMLSpanElement).style.transform = "";
-        }
+  private adjustObscuredEndcapLabel(name: "value" | "minValue"): number {
+    const handle: HTMLButtonElement | null = this.el.shadowRoot.querySelector(
+      `.thumb--${name}`
+    );
+    const label: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      `.handle__label--${name}`
+    );
+    const labelStatic: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      `.handle__label--${name}.static`
+    );
+    const labelTransformed: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      `.handle__label--${name}.transformed`
+    );
+    if (handle && label && labelStatic && labelTransformed) {
+      const labelOffset = this.getLabelOffset(handle, labelStatic);
+      if (labelOffset) {
+        (label as HTMLSpanElement).style.transform = `translateX(${labelOffset}px)`;
+        (labelTransformed as HTMLSpanElement).style.transform = `translateX(${labelOffset}px)`;
+      } else {
+        (label as HTMLSpanElement).style.transform = "";
+        (labelTransformed as HTMLSpanElement).style.transform = "";
+      }
+      return Math.abs(labelOffset);
+    }
+    return 0;
+  }
+  private hyphenateCollidingRangeHandleLabels(
+    valueLabelOffset: number,
+    minValueLabelOffset: number
+  ) {
+    const minValueLabel: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      `.handle__label--minValue`
+    );
+    const minValueLabelStatic: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      `.handle__label--minValue.static`
+    );
+    const minValueLabelTransformed: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      `.handle__label--minValue.transformed`
+    );
+
+    const valueLabel: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      `.handle__label--value`
+    );
+    const valueLabelStatic: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      `.handle__label--value.static`
+    );
+    const valueLabelTransformed: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
+      `.handle__label--value.transformed`
+    );
+
+    if (
+      minValueLabel &&
+      valueLabel &&
+      minValueLabelStatic &&
+      valueLabelStatic &&
+      minValueLabelTransformed &&
+      valueLabelTransformed
+    ) {
+      if (valueLabelOffset > 0) {
+        const labelOverlap = this.getRangeLabelOverlap(
+          minValueLabelTransformed,
+          valueLabelTransformed
+        );
+        minValueLabel.style.marginRight = `${
+          labelOverlap !== 0 ? labelOverlap * 2 + valueLabelOffset + 5 : 0
+        }px`;
+        valueLabel.style.marginLeft = "0px";
+      } else if (minValueLabelOffset > 0) {
+        const labelOverlap = this.getRangeLabelOverlap(
+          minValueLabelTransformed,
+          valueLabelTransformed
+        );
+        minValueLabel.style.marginRight = "0px";
+        valueLabel.style.marginLeft = `${
+          labelOverlap !== 0 ? labelOverlap * 2 + minValueLabelOffset + 5 : 0
+        }px`;
+      } else {
+        const labelStaticOverlap = this.getRangeLabelOverlap(
+          minValueLabelStatic,
+          valueLabelStatic
+        );
+        minValueLabel.style.marginRight = `${
+          labelStaticOverlap !== 0 ? labelStaticOverlap + 5 : 0
+        }px`;
+        valueLabel.style.marginLeft = `${
+          labelStaticOverlap !== 0 ? labelStaticOverlap + 5 : 0
+        }px`;
       }
     }
   }
@@ -1056,6 +1170,18 @@ export class CalciteSlider {
     return 0;
   }
 
+  private getRangeLabelOverlap(
+    minValueLabel: HTMLSpanElement,
+    valueLabel: HTMLSpanElement
+  ): number {
+    const minValueLabelBounds = minValueLabel.getBoundingClientRect();
+    const valueLabelBounds = valueLabel.getBoundingClientRect();
+    if (minValueLabelBounds.right > valueLabelBounds.left) {
+      return minValueLabelBounds.right - valueLabelBounds.left;
+    }
+    return 0;
+  }
+
   private isMinTickLabelObscured(minLabel, handle) {
     const minLabelRight = minLabel.offsetLeft + minLabel.offsetWidth;
     const handleLeft = handle.offsetLeft;

From d9cfe00cc1d431b0c68add5bc4307f879451be90 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Wed, 10 Jun 2020 17:26:54 -0700
Subject: [PATCH 43/52] first start to the hyphenation logic

---
 .../calcite-slider/calcite-slider.scss        |  3 ++
 .../calcite-slider/calcite-slider.tsx         | 41 ++++++++++++-------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index fd522ad8f8b..da6b154c080 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -79,6 +79,9 @@ $tick-height: 4px;
       position: absolute;
       top: 0;
     }
+    &--minValue.hyphen::after {
+      content: " \2014";
+    }
   }
 
   .handle {
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 7fa6344a2c1..fa1f44c6741 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -1025,34 +1025,45 @@ export class CalciteSlider {
       valueLabelTransformed
     ) {
       if (valueLabelOffset > 0) {
-        const labelOverlap = this.getRangeLabelOverlap(
+        const labelTransformedOverlap = this.getRangeLabelOverlap(
           minValueLabelTransformed,
           valueLabelTransformed
         );
-        minValueLabel.style.marginRight = `${
-          labelOverlap !== 0 ? labelOverlap * 2 + valueLabelOffset + 5 : 0
-        }px`;
+        if (labelTransformedOverlap > 0) {
+          minValueLabel.classList.add("hyphen");
+          minValueLabel.style.marginRight = `${
+            labelTransformedOverlap * 2 + valueLabelOffset
+          }px`;
+        } else {
+          minValueLabel.classList.remove("hyphen");
+          minValueLabel.style.marginRight = "0px";
+        }
         valueLabel.style.marginLeft = "0px";
       } else if (minValueLabelOffset > 0) {
-        const labelOverlap = this.getRangeLabelOverlap(
+        const labelTransformedOverlap = this.getRangeLabelOverlap(
           minValueLabelTransformed,
           valueLabelTransformed
         );
         minValueLabel.style.marginRight = "0px";
         valueLabel.style.marginLeft = `${
-          labelOverlap !== 0 ? labelOverlap * 2 + minValueLabelOffset + 5 : 0
+          labelTransformedOverlap !== 0
+            ? labelTransformedOverlap * 2 + minValueLabelOffset
+            : 0
         }px`;
       } else {
-        const labelStaticOverlap = this.getRangeLabelOverlap(
-          minValueLabelStatic,
-          valueLabelStatic
+        const labelTransformedOverlap = this.getRangeLabelOverlap(
+          minValueLabelTransformed,
+          valueLabelTransformed
         );
-        minValueLabel.style.marginRight = `${
-          labelStaticOverlap !== 0 ? labelStaticOverlap + 5 : 0
-        }px`;
-        valueLabel.style.marginLeft = `${
-          labelStaticOverlap !== 0 ? labelStaticOverlap + 5 : 0
-        }px`;
+        if (labelTransformedOverlap > 0) {
+          minValueLabel.classList.add("hyphen");
+          minValueLabel.style.marginRight = `${labelTransformedOverlap + 10}px`;
+          valueLabel.style.marginLeft = `${labelTransformedOverlap + 10}px`;
+        } else {
+          minValueLabel.classList.remove("hyphen");
+          minValueLabel.style.marginRight = "0px";
+          valueLabel.style.marginLeft = "0px";
+        }
       }
     }
   }

From 12b9fd2233a8a3cdfd19082d5102c61af4f80388 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 11 Jun 2020 12:42:34 -0700
Subject: [PATCH 44/52] fix: perfect hyphen centering and using pure css with
 responsive ems for hyphenation spacing instead of making those adjustments in
 the javascript

---
 .../calcite-slider/calcite-slider.scss        | 17 ++++++-
 .../calcite-slider/calcite-slider.tsx         | 46 +++++++++++--------
 2 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index da6b154c080..3c8ccb4bb5b 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -67,6 +67,8 @@ $tick-height: 4px;
   transform: translate(7px, -8px);
 
   .handle__label {
+    background-color: rgba(255, 0, 0, 0.3);
+    box-sizing: border-box;
     transition: transform 150ms;
     @include font-size(-4);
     font-weight: 500;
@@ -80,7 +82,20 @@ $tick-height: 4px;
       top: 0;
     }
     &--minValue.hyphen::after {
-      content: " \2014";
+      content: "\2014";
+      display: inline-block;
+      width: 1em;
+    }
+    &--minValue.hyphen.max-offset::after {
+      margin-right: 1em;
+    }
+    &--value.hyphen::before {
+      content: "\2014";
+      display: inline-block;
+      width: 1em;
+    }
+    &--value.hyphen.min-offset::before {
+      margin-left: 1em;
     }
   }
 
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index fa1f44c6741..79d5127d3e1 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -1005,7 +1005,6 @@ export class CalciteSlider {
     const minValueLabelTransformed: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
       `.handle__label--minValue.transformed`
     );
-
     const valueLabel: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
       `.handle__label--value`
     );
@@ -1015,7 +1014,6 @@ export class CalciteSlider {
     const valueLabelTransformed: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
       `.handle__label--value.transformed`
     );
-
     if (
       minValueLabel &&
       valueLabel &&
@@ -1025,42 +1023,52 @@ export class CalciteSlider {
       valueLabelTransformed
     ) {
       if (valueLabelOffset > 0) {
-        const labelTransformedOverlap = this.getRangeLabelOverlap(
-          minValueLabelTransformed,
+        const valueLabelTransformedOverlap = this.getRangeLabelOverlap(
+          minValueLabelStatic,
           valueLabelTransformed
         );
-        if (labelTransformedOverlap > 0) {
+        if (valueLabelTransformedOverlap > 0) {
           minValueLabel.classList.add("hyphen");
+          minValueLabel.classList.add("max-offset");
           minValueLabel.style.marginRight = `${
-            labelTransformedOverlap * 2 + valueLabelOffset
+            valueLabelTransformedOverlap * 2
           }px`;
         } else {
           minValueLabel.classList.remove("hyphen");
+          minValueLabel.classList.remove("max-offset");
           minValueLabel.style.marginRight = "0px";
         }
         valueLabel.style.marginLeft = "0px";
       } else if (minValueLabelOffset > 0) {
-        const labelTransformedOverlap = this.getRangeLabelOverlap(
+        const minValueLabelTransformedOverlap = this.getRangeLabelOverlap(
           minValueLabelTransformed,
-          valueLabelTransformed
+          valueLabelStatic
         );
+        if (minValueLabelTransformedOverlap > 0) {
+          valueLabel.classList.add("hyphen");
+          valueLabel.classList.add("min-offset");
+          valueLabel.style.marginLeft = `${
+            minValueLabelTransformedOverlap * 2
+          }px`;
+        } else {
+          valueLabel.classList.remove("hyphen");
+          valueLabel.classList.remove("min-offset");
+          valueLabel.style.marginLeft = "0px";
+        }
         minValueLabel.style.marginRight = "0px";
-        valueLabel.style.marginLeft = `${
-          labelTransformedOverlap !== 0
-            ? labelTransformedOverlap * 2 + minValueLabelOffset
-            : 0
-        }px`;
       } else {
-        const labelTransformedOverlap = this.getRangeLabelOverlap(
-          minValueLabelTransformed,
-          valueLabelTransformed
+        const labelStaticOverlap = this.getRangeLabelOverlap(
+          minValueLabelStatic,
+          valueLabelStatic
         );
-        if (labelTransformedOverlap > 0) {
+        if (labelStaticOverlap > 0) {
           minValueLabel.classList.add("hyphen");
-          minValueLabel.style.marginRight = `${labelTransformedOverlap + 10}px`;
-          valueLabel.style.marginLeft = `${labelTransformedOverlap + 10}px`;
+          valueLabel.classList.add("hyphen");
+          minValueLabel.style.marginRight = `${labelStaticOverlap}px`;
+          valueLabel.style.marginLeft = `${labelStaticOverlap}px`;
         } else {
           minValueLabel.classList.remove("hyphen");
+          valueLabel.classList.remove("hyphen");
           minValueLabel.style.marginRight = "0px";
           valueLabel.style.marginLeft = "0px";
         }

From 02000ba28624499a9fbf7f48e422cff889719899 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 11 Jun 2020 12:47:37 -0700
Subject: [PATCH 45/52] removing unneeded css

---
 src/components/calcite-slider/calcite-slider.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 3c8ccb4bb5b..cad2c0c1dce 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -67,8 +67,6 @@ $tick-height: 4px;
   transform: translate(7px, -8px);
 
   .handle__label {
-    background-color: rgba(255, 0, 0, 0.3);
-    box-sizing: border-box;
     transition: transform 150ms;
     @include font-size(-4);
     font-weight: 500;

From ad95d416ac09b55adfc37d80316cb3a73861369e Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 11 Jun 2020 15:39:15 -0700
Subject: [PATCH 46/52] fix: precise css bugs discovered from storybook setting
 precise=false

---
 .../calcite-slider/calcite-slider.scss        | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index cad2c0c1dce..43701514670 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -35,20 +35,20 @@ $tick-height: 4px;
  * with text elements to prevent overlap
  */
 :host([label-handles]),
-:host([precise]) {
+:host([precise]:not([precise="false"])) {
   margin-top: $handle-size + $thumb-padding;
 }
 
 :host([label-ticks]),
-:host([precise][is-range]) {
+:host([precise]:not([precise="false"])[is-range]) {
   margin-bottom: $handle-size + $thumb-padding;
 }
 
-:host([precise][label-handles]) {
+:host([precise]:not([precise="false"])[label-handles]) {
   margin-top: $thumb-size + $thumb-padding;
 }
 
-:host([precise][label-handles][is-range]) {
+:host([precise]:not([precise="false"])[label-handles][is-range]) {
   margin-bottom: $thumb-size + $thumb-padding;
 }
 
@@ -157,7 +157,7 @@ $tick-height: 4px;
     transform: translate(-50%, -8px);
   }
 }
-:host([precise]) {
+:host([precise]:not([precise="false"])) {
   .thumb {
     transform: translate(7px, -21px);
   }
@@ -169,7 +169,7 @@ $tick-height: 4px;
     }
   }
 }
-:host([has-histogram][precise]) {
+:host([has-histogram][precise]:not([precise="false"])) {
   .thumb {
     transform: translate(7px, -2px);
   }
@@ -177,7 +177,7 @@ $tick-height: 4px;
     transform: translate(-50%, -2px);
   }
 }
-:host([precise][ticks]) {
+:host([ticks][precise]:not([precise="false"])) {
   .thumb {
     transform: translate(7px, -20px);
   }
@@ -185,7 +185,7 @@ $tick-height: 4px;
     transform: translate(-7px, -3px);
   }
 }
-:host([has-histogram][precise][ticks]) {
+:host([has-histogram][ticks][precise]:not([precise="false"])) {
   .thumb {
     transform: translate(7px, -3px);
   }
@@ -193,7 +193,7 @@ $tick-height: 4px;
     transform: translate(-50%, -3px);
   }
 }
-:host([precise][label-handles]) {
+:host([label-handles][precise]:not([precise="false"])) {
   .thumb {
     transform: translate(50%, -38px);
   }
@@ -201,7 +201,7 @@ $tick-height: 4px;
     transform: translate(-50%, -2px);
   }
 }
-:host([has-histogram][precise][label-handles]) {
+:host([has-histogram][label-handles][precise]:not([precise="false"])) {
   .thumb {
     transform: translate(50%, -2px);
   }
@@ -209,7 +209,7 @@ $tick-height: 4px;
     transform: translate(-50%, -2px);
   }
 }
-:host([precise][ticks][label-handles]) {
+:host([ticks][label-handles][precise]:not([precise="false"])) {
   .thumb {
     transform: translate(50%, -37px);
   }
@@ -217,7 +217,7 @@ $tick-height: 4px;
     transform: translate(-50%, -3px);
   }
 }
-:host([has-histogram][precise][ticks][label-handles]) {
+:host([has-histogram][ticks][label-handles][precise]:not([precise="false"])) {
   .thumb {
     transform: translate(50%, -3px);
   }
@@ -318,7 +318,7 @@ $tick-height: 4px;
 :host([has-histogram][label-handles]) {
   @include histogramEndcaps();
 }
-:host([has-histogram][precise]) {
+:host([has-histogram][precise]:not([precise="false"])) {
   @include histogramEndcaps();
 }
 

From 020ce358705208a4f80f4a0ca97ca92f44783dfe Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 11 Jun 2020 16:24:34 -0700
Subject: [PATCH 47/52] shrinking focus square to around 24x24

---
 src/components/calcite-slider/calcite-slider.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 43701514670..64de071f455 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -127,7 +127,7 @@ $tick-height: 4px;
   &:focus {
     .handle {
       @include focus-style-outset();
-      outline-offset: 6px;
+      outline-offset: 2px;
     }
     .handle-extension {
       background-color: var(--calcite-ui-blue-1);

From 9814b7079e771edf9ad6612cab9a9e1fd882d56a Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 11 Jun 2020 16:46:01 -0700
Subject: [PATCH 48/52] fix: shortening white gap between ticks

---
 src/components/calcite-slider/calcite-slider.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 64de071f455..7ec7d11c21d 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -277,10 +277,8 @@ $tick-height: 4px;
   width: 2px;
   height: $tick-height;
   left: var(--calcite-ui-border-1-offset);
-  margin-left: -3px;
+  margin-left: -2px;
   border: 1px solid var(--calcite-ui-foreground-1);
-  border-right-width: 2px;
-  border-left-width: 2px;
   background-color: var(--calcite-ui-border-1);
 }
 

From 0945b90d78ea9ec7fad79ad2e9ae3b35fc35d2f5 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 12 Jun 2020 09:16:01 -0700
Subject: [PATCH 49/52] feat: adding histogram highlighting for single handle
 sliders

---
 src/components/calcite-slider/calcite-slider.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 79d5127d3e1..facc462d095 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -616,8 +616,8 @@ export class CalciteSlider {
           width={300}
           height={48}
           data={this.histogram}
-          highlightMin={this.isRange ? this.minValue : null}
-          highlightMax={this.isRange ? this.maxValue : null}
+          highlightMin={this.isRange ? this.minValue : this.min}
+          highlightMax={this.isRange ? this.maxValue : this.value}
         />
       </div>
     ) : null;

From 4eb616c64e0d3b095a89d5f376d6587132791409 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 12 Jun 2020 10:52:18 -0700
Subject: [PATCH 50/52] fix: small-value overlap issues

---
 .../calcite-slider/calcite-slider.tsx         | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index facc462d095..c9040800553 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -1115,8 +1115,12 @@ export class CalciteSlider {
       return;
     }
 
-    const minHandle = this.el.shadowRoot.querySelector(".thumb--minValue");
-    const maxHandle = this.el.shadowRoot.querySelector(".thumb--value");
+    const minHandle: HTMLButtonElement | null = this.el.shadowRoot.querySelector(
+      ".thumb--minValue"
+    );
+    const maxHandle: HTMLButtonElement | null = this.el.shadowRoot.querySelector(
+      ".thumb--value"
+    );
 
     const minTickLabel: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
       ".tick__label--min"
@@ -1126,12 +1130,12 @@ export class CalciteSlider {
     );
 
     if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
-      if (this.isMinTickLabelObscured(minTickLabel.offsetParent, maxHandle)) {
+      if (this.isMinTickLabelObscured(minTickLabel, maxHandle)) {
         minTickLabel.style.opacity = "0";
       } else {
         minTickLabel.style.opacity = "1";
       }
-      if (this.isMaxTickLabelObscured(maxTickLabel.offsetParent, maxHandle)) {
+      if (this.isMaxTickLabelObscured(maxTickLabel, maxHandle)) {
         maxTickLabel.style.opacity = "0";
       } else {
         maxTickLabel.style.opacity = "1";
@@ -1140,16 +1144,16 @@ export class CalciteSlider {
 
     if (minHandle && maxHandle && minTickLabel && maxTickLabel) {
       if (
-        this.isMinTickLabelObscured(minTickLabel.offsetParent, minHandle) ||
-        this.isMinTickLabelObscured(minTickLabel.offsetParent, maxHandle)
+        this.isMinTickLabelObscured(minTickLabel, minHandle) ||
+        this.isMinTickLabelObscured(minTickLabel, maxHandle)
       ) {
         minTickLabel.style.opacity = "0";
       } else {
         minTickLabel.style.opacity = "1";
       }
       if (
-        this.isMaxTickLabelObscured(maxTickLabel.offsetParent, minHandle) ||
-        (this.isMaxTickLabelObscured(maxTickLabel.offsetParent, maxHandle) &&
+        this.isMaxTickLabelObscured(maxTickLabel, minHandle) ||
+        (this.isMaxTickLabelObscured(maxTickLabel, maxHandle) &&
           this.hasHistogram)
       ) {
         maxTickLabel.style.opacity = "0";
@@ -1201,19 +1205,25 @@ export class CalciteSlider {
     return 0;
   }
 
-  private isMinTickLabelObscured(minLabel, handle) {
-    const minLabelRight = minLabel.offsetLeft + minLabel.offsetWidth;
-    const handleLeft = handle.offsetLeft;
-    if (handleLeft < minLabelRight) {
+  private isMinTickLabelObscured(
+    minLabel: HTMLSpanElement,
+    handle: HTMLButtonElement
+  ) {
+    const minLabelBounds = minLabel.getBoundingClientRect();
+    const handleBounds = handle.getBoundingClientRect();
+    if (handleBounds.left < minLabelBounds.right) {
       return true;
     }
     return false;
   }
 
-  private isMaxTickLabelObscured(maxLabel, handle) {
-    const maxLabelLeft = maxLabel.offsetLeft;
-    const handleRight = handle.offsetLeft + handle.offsetWidth;
-    if (handleRight > maxLabelLeft) {
+  private isMaxTickLabelObscured(
+    maxLabel: HTMLSpanElement,
+    handle: HTMLButtonElement
+  ) {
+    const maxLabelBounds = maxLabel.getBoundingClientRect();
+    const handleBounds = handle.getBoundingClientRect();
+    if (handleBounds.right > maxLabelBounds.left) {
       return true;
     }
     return false;

From b262d9f7092dde26c84a1874f956be2f437d604d Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 12 Jun 2020 12:10:56 -0700
Subject: [PATCH 51/52] fix: preventing the jumping effect that occurs when
 handles butt right up against each other before the hyphen appears.  Now both
 labels transition into the hyphenation display perfectly smoothly.

---
 .../calcite-slider/calcite-slider.scss        |  6 --
 .../calcite-slider/calcite-slider.tsx         | 55 ++++++++++++++-----
 2 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index 7ec7d11c21d..b2a95dc4de0 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -84,17 +84,11 @@ $tick-height: 4px;
       display: inline-block;
       width: 1em;
     }
-    &--minValue.hyphen.max-offset::after {
-      margin-right: 1em;
-    }
     &--value.hyphen::before {
       content: "\2014";
       display: inline-block;
       width: 1em;
     }
-    &--value.hyphen.min-offset::before {
-      margin-left: 1em;
-    }
   }
 
   .handle {
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index c9040800553..dc265e31ebb 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -956,6 +956,14 @@ export class CalciteSlider {
     }
     return num;
   }
+  private getFontSizeForElement(element: HTMLElement) {
+    return Number(
+      window
+        .getComputedStyle(element)
+        .getPropertyValue("font-size")
+        .match(/\d+/)[0]
+    );
+  }
   /**
    * Get position of value along range as fractional value
    * @return {number} number in the unit interval [0,1]
@@ -1014,6 +1022,7 @@ export class CalciteSlider {
     const valueLabelTransformed: HTMLSpanElement | null = this.el.shadowRoot.querySelector(
       `.handle__label--value.transformed`
     );
+    const labelFontSize = this.getFontSizeForElement(minValueLabel);
     if (
       minValueLabel &&
       valueLabel &&
@@ -1031,7 +1040,7 @@ export class CalciteSlider {
           minValueLabel.classList.add("hyphen");
           minValueLabel.classList.add("max-offset");
           minValueLabel.style.marginRight = `${
-            valueLabelTransformedOverlap * 2
+            valueLabelTransformedOverlap * 2 - labelFontSize
           }px`;
         } else {
           minValueLabel.classList.remove("hyphen");
@@ -1048,7 +1057,7 @@ export class CalciteSlider {
           valueLabel.classList.add("hyphen");
           valueLabel.classList.add("min-offset");
           valueLabel.style.marginLeft = `${
-            minValueLabelTransformedOverlap * 2
+            minValueLabelTransformedOverlap * 2 - labelFontSize
           }px`;
         } else {
           valueLabel.classList.remove("hyphen");
@@ -1064,8 +1073,12 @@ export class CalciteSlider {
         if (labelStaticOverlap > 0) {
           minValueLabel.classList.add("hyphen");
           valueLabel.classList.add("hyphen");
-          minValueLabel.style.marginRight = `${labelStaticOverlap}px`;
-          valueLabel.style.marginLeft = `${labelStaticOverlap}px`;
+          minValueLabel.style.marginRight = `${
+            labelStaticOverlap - labelFontSize
+          }px`;
+          valueLabel.style.marginLeft = `${
+            labelStaticOverlap - labelFontSize
+          }px`;
         } else {
           minValueLabel.classList.remove("hyphen");
           valueLabel.classList.remove("hyphen");
@@ -1075,6 +1088,9 @@ export class CalciteSlider {
       }
     }
   }
+  /**
+   * Hides bounding tick labels that are obscured by either handle.
+   */
   private hideObscuredBoundingTickLabels() {
     if (
       !this.hasHistogram &&
@@ -1192,23 +1208,32 @@ export class CalciteSlider {
     }
     return 0;
   }
-
+  /**
+   * Returns an integer representing the number of pixels that the two given span elements are overlapping, taking into account
+   * a space in between the two spans equal to the font-size set on them to account for the space needed to render a hyphen.
+   * @param minValueLabel
+   * @param valueLabel
+   */
   private getRangeLabelOverlap(
     minValueLabel: HTMLSpanElement,
     valueLabel: HTMLSpanElement
   ): number {
     const minValueLabelBounds = minValueLabel.getBoundingClientRect();
     const valueLabelBounds = valueLabel.getBoundingClientRect();
-    if (minValueLabelBounds.right > valueLabelBounds.left) {
-      return minValueLabelBounds.right - valueLabelBounds.left;
-    }
-    return 0;
+    const minValueLabelFontSize = this.getFontSizeForElement(minValueLabel);
+    const rangeLabelOverlap =
+      minValueLabelBounds.right + minValueLabelFontSize - valueLabelBounds.left;
+    return rangeLabelOverlap > 0 ? rangeLabelOverlap : 0;
   }
-
+  /**
+   * Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle button element.
+   * @param minLabel
+   * @param handle
+   */
   private isMinTickLabelObscured(
     minLabel: HTMLSpanElement,
     handle: HTMLButtonElement
-  ) {
+  ): boolean {
     const minLabelBounds = minLabel.getBoundingClientRect();
     const handleBounds = handle.getBoundingClientRect();
     if (handleBounds.left < minLabelBounds.right) {
@@ -1216,11 +1241,15 @@ export class CalciteSlider {
     }
     return false;
   }
-
+  /**
+   * Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle button element.
+   * @param maxLabel
+   * @param handle
+   */
   private isMaxTickLabelObscured(
     maxLabel: HTMLSpanElement,
     handle: HTMLButtonElement
-  ) {
+  ): boolean {
     const maxLabelBounds = maxLabel.getBoundingClientRect();
     const handleBounds = handle.getBoundingClientRect();
     if (handleBounds.right > maxLabelBounds.left) {

From 8956acbad2bf0e07aee3a19036cc156793ce6f03 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 12 Jun 2020 15:31:03 -0700
Subject: [PATCH 52/52] fix: prevent hyphenated range labels from extending
 past edge of slider in cases where the label on one side doesn't exceed the
 handle width

---
 src/components/calcite-slider/calcite-slider.tsx | 12 ++++++++++--
 src/demos/calcite-slider.html                    |  2 ++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index dc265e31ebb..cbf071b39b4 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -1031,7 +1031,11 @@ export class CalciteSlider {
       minValueLabelTransformed &&
       valueLabelTransformed
     ) {
-      if (valueLabelOffset > 0) {
+      if (
+        valueLabelOffset > 0 ||
+        valueLabel.getBoundingClientRect().right >
+          this.el.getBoundingClientRect().right
+      ) {
         const valueLabelTransformedOverlap = this.getRangeLabelOverlap(
           minValueLabelStatic,
           valueLabelTransformed
@@ -1048,7 +1052,11 @@ export class CalciteSlider {
           minValueLabel.style.marginRight = "0px";
         }
         valueLabel.style.marginLeft = "0px";
-      } else if (minValueLabelOffset > 0) {
+      } else if (
+        minValueLabelOffset > 0 ||
+        minValueLabel.getBoundingClientRect().left <
+          this.el.getBoundingClientRect().left
+      ) {
         const minValueLabelTransformedOverlap = this.getRangeLabelOverlap(
           minValueLabelTransformed,
           valueLabelStatic
diff --git a/src/demos/calcite-slider.html b/src/demos/calcite-slider.html
index 272219e73c8..e85c0e5fa4e 100644
--- a/src/demos/calcite-slider.html
+++ b/src/demos/calcite-slider.html
@@ -207,6 +207,8 @@ <h3>Histogram</h3>
         <h3>Histogram with Labeled Handles</h3>
         <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
           max-label="Temperature range (upper)" class="js-histogram" label-handles></calcite-slider>
+        <calcite-slider min="-100" max="0" min-value="-100" max-value="0" step="1" min-label="Temperature range (lower)"
+          max-label="Temperature range (upper)" class="js-histogram" label-handles></calcite-slider>
 
         <h3>Histogram with Precise Handles</h3>
         <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"