Fix range tooltip on iOS; closes #110

src/components/range/range.scss

@@ -147,7 +147,7 @@
   }
 }
 
-.range--focused .range__tooltip {
+.range--tooltip-visible .range__tooltip {
   opacity: 1;
 }
 

src/components/range/range.tsx

@@ -21,6 +21,7 @@ export class Range {
   resizeObserver: any;
 
   @State() hasFocus = false;
+  @State() hasTooltip = false;
 
   /** The input's name attribute. */
   @Prop() name = '';
@@ -59,6 +60,7 @@ export class Range {
     this.handleInput = this.handleInput.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
   }
 
   componentWillLoad() {
@@ -93,16 +95,22 @@ export class Range {
 
   handleBlur() {
     this.hasFocus = false;
+    this.hasTooltip = false;
     this.slBlur.emit();
     this.resizeObserver.unobserve(this.input);
   }
 
   handleFocus() {
     this.hasFocus = true;
+    this.hasTooltip = true;
     this.slFocus.emit();
     this.resizeObserver.observe(this.input);
   }
 
+  handleTouchStart() {
+    this.setFocus();
+  }
+
   syncTooltip() {
     if (this.tooltip !== 'none') {
       const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
@@ -125,9 +133,11 @@ export class Range {
           // States
           'range--disabled': this.disabled,
           'range--focused': this.hasFocus,
+          'range--tooltip-visible': this.hasTooltip,
           'range--tooltip-top': this.tooltip === 'top',
           'range--tooltip-bottom': this.tooltip === 'bottom'
         }}
+        onTouchStart={this.handleTouchStart}
       >
         <input
           part="input"