From fc7836084a32c837afd9e031e094f0911424490e Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 18 Oct 2021 17:54:29 -0400
Subject: [PATCH] add tooltip guard

---
 docs/resources/changelog.md   |  1 +
 src/components/range/range.ts | 14 ++++++++------
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index b328754ef..27e32679f 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added experimental `<sl-animated-image>` component
 - Added `label` attribute to `<sl-progress-bar>` and `<sl-progress-ring>` to improve a11y
 - Fixed a bug where the tooltip would show briefly when clicking a disabled `<sl-range>`
+- Fixed a bug that caused a console error when `<sl-range>` was used
 - Fixed a bug where the `nav` part in `<sl-tab-group>` was on the incorrect element [#563](https://github.com/shoelace-style/shoelace/pull/563)
 - Updated to Bootstrap Icons to 1.6.1
 
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 07f1b8f6f..760af6410 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -185,13 +185,15 @@ export default class SlRange extends LitElement {
   }
 
   syncTooltip(percent: number) {
-    const inputWidth = this.input.offsetWidth;
-    const tooltipWidth = this.output.offsetWidth;
-    const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
-    const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
+    if (this.output) {
+      const inputWidth = this.input.offsetWidth;
+      const tooltipWidth = this.output.offsetWidth;
+      const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
+      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
 
-    this.output.style.transform = `translateX(${x})`;
-    this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
+      this.output.style.transform = `translateX(${x})`;
+      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
+    }
   }
 
   render() {