add tooltip guard

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
 

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() {