core/src/components.d.ts

@@ -41,6 +41,7 @@ import {
   PickerOptions,
   PopoverOptions,
   RangeInputChangeEvent,
+  RangeValue,
   RouteID,
   RouterDirection,
   RouterEventDetail,
@@ -1798,7 +1799,7 @@ declare global {
       /**
        * the value of the range.
        */
-      'value': any;
+      'value': RangeValue;
     }
 
     interface IonRefresherContent {
@@ -5356,7 +5357,7 @@ declare global {
       /**
        * the value of the range.
        */
-      'value'?: any;
+      'value'?: RangeValue;
     }
 
     export interface IonRefresherContentAttributes extends HTMLAttributes {

core/src/components/app/app.tsx

@@ -28,7 +28,7 @@ export class App {
   }
 
   componentDidLoad() {
-    importTapClick(this.win, this.isDevice);
+    importTapClick(this.win);
     importInputShims(this.win, this.config);
     importStatusTap(this.win, this.isDevice, this.queue);
   }
@@ -57,10 +57,8 @@ async function importStatusTap(win: Window, device: boolean, queue: QueueApi) {
   }
 }
 
-async function importTapClick(win: Window, device: boolean) {
-  if (device) {
-    (await import('../../utils/tap-click')).startTapClick(win.document);
-  }
+async function importTapClick(win: Window) {
+  (await import('../../utils/tap-click')).startTapClick(win.document);
 }
 
 async function importInputShims(win: Window, config: Config) {

core/src/components/range/range.scss

@@ -12,6 +12,8 @@
 
   flex: 1;
   align-items: center;
+
+  user-select: none;
 }
 
 ::slotted(ion-label) {

core/src/components/range/range.tsx

@@ -1,10 +1,10 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { BaseInput, Color, Gesture, GestureDetail, Mode, RangeInputChangeEvent, StyleEvent } from '../../interface';
+import { BaseInput, Color, Gesture, GestureDetail, Mode, RangeInputChangeEvent, RangeValue, StyleEvent } from '../../interface';
 import { clamp, debounceEvent, deferEvent } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
-import { Knob, RangeEventDetail, RangeValue } from './range-interface';
+import { Knob, RangeEventDetail } from './range-interface';
 
 @Component({
   tag: 'ion-range',
@@ -106,8 +106,7 @@ export class Range implements BaseInput {
   /**
    * the value of the range.
    */
-  @Prop({ mutable: true })
-  value: any = 0;
+  @Prop({ mutable: true }) value: RangeValue = 0;
   @Watch('value')
   protected valueChanged(value: RangeValue) {
     if (!this.noUpdate) {
@@ -172,6 +171,7 @@ export class Range implements BaseInput {
     } else {
       this.ratioB += step;
     }
+    this.updateValue();
   }
 
   private getValue(): RangeValue {