fixes #477

docs/resources/changelog.md

@@ -16,6 +16,7 @@ This is a lot more intuitive and makes it easier to activate animations imperati
 - 🚨 BREAKING: removed `getCurrentTime()` and `setCurrentTime()` from `sl-animation` (use the `currentTime` property instead)
 - 🚨 BREAKING: removed `closeOnSelect` prop from `sl-dropdown` (use `stayOpenOnSelect` instead)
 - Added `currentTime` to `sl-animation` to control the current time without methods
+- Fixed a bug in `sl-range` where the tooltip wasn't showing in Safari [#477](https://github.com/shoelace-style/shoelace/issues/477)
 - Reworked tabbable logic to be more performant [#466](https://github.com/shoelace-style/shoelace/issues/466)
 
 ## 2.0.0-beta.45

src/components/range/range.ts

@@ -153,8 +153,12 @@ export default class SlRange extends LitElement {
     this.hasLabelSlot = hasSlot(this, 'label');
   }
 
-  handleTouchStart() {
-    this.focus();
+  handleThumbStart() {
+    this.hasTooltip = true;
+  }
+
+  handleThumbEnd() {
+    this.hasTooltip = false;
   }
 
   syncTooltip() {
@@ -193,7 +197,10 @@ export default class SlRange extends LitElement {
             'range--tooltip-top': this.tooltip === 'top',
             'range--tooltip-bottom': this.tooltip === 'bottom'
           })}
-          @touchstart=${this.handleTouchStart}
+          @mousedown=${this.handleThumbStart}
+          @mouseup=${this.handleThumbEnd}
+          @touchstart=${this.handleThumbStart}
+          @touchend=${this.handleThumbEnd}
         >
           <input
             part="input"