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,6 +185,7 @@ export default class SlRange extends LitElement {
   }
 
   syncTooltip(percent: number) {
+    if (this.output) {
       const inputWidth = this.input.offsetWidth;
       const tooltipWidth = this.output.offsetWidth;
       const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
@@ -193,6 +194,7 @@ export default class SlRange extends LitElement {
       this.output.style.transform = `translateX(${x})`;
       this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
     }
+  }
 
   render() {
     // NOTE - always bind value after min/max, otherwise it will be clamped