fix(range): fixes when step size is bigger than range

fixes #8830
fixes #8802

Author: manucorporat

src/components/range/range.scss

@@ -4,10 +4,14 @@
 // --------------------------------------------------
 
 .item-range .item-inner {
+  width: 100%;
+
   overflow: visible;
 }
 
 .item-range .input-wrapper {
+  width: 100%;
+
   overflow: visible;
 
   flex-direction: column;

src/components/range/range.ts

@@ -602,16 +602,18 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
    * @private
    */
   ratioToValue(ratio: number) {
-    ratio = Math.round(((this._max - this._min) * ratio) + this._min);
-    return Math.round(ratio / this._step) * this._step;
+    ratio = Math.round(((this._max - this._min) * ratio));
+    ratio = Math.round(ratio / this._step) * this._step + this._min;
+    return clamp(this._min, ratio, this._max);
   }
 
   /**
    * @private
    */
   valueToRatio(value: number) {
-    value = Math.round(clamp(this._min, value, this._max) / this._step) * this._step;
-    return (value - this._min) / (this._max - this._min);
+    value = Math.round((value - this._min) / this._step) * this._step;
+    value = value / (this._max - this._min);
+    return clamp(0, value, 1);
   }
 
   /**

src/components/range/test/basic/page1.html

@@ -18,6 +18,12 @@
 <ion-content>
 
   <ion-list>
+
+    <ion-item>
+      <ion-label>step="5199" max="5199" min="2499" snaps="true"</ion-label>
+      <ion-range step="5199" max="5199" min="2499" snaps="true"></ion-range>
+    </ion-item>
+
     <ion-item>
       <ion-range [(ngModel)]="singleValue" color="danger" pin="true" (ionChange)="rangeChange($event)" [debounce]="100"></ion-range>
     </ion-item>

src/components/range/test/range.spec.ts

@@ -0,0 +1,69 @@
+import { Range } from '../range';
+import { mockConfig, mockRenderer, mockElementRef, mockHaptic } from '../../../util/mock-providers';
+import { Form } from '../../../util/form';
+
+
+describe('Range', () => {
+  describe('valueToRatio', () => {
+    it('step=1', () => {
+      let range = createRange();
+      range.max = 5000;
+      range.min = 2490;
+      range.step = 1;
+      range.snaps = true;
+      expect(range.valueToRatio(5000)).toEqual(1);
+      expect(range.valueToRatio(5100)).toEqual(1);
+      expect(range.valueToRatio(2490)).toEqual(0);
+      expect(range.valueToRatio(2000)).toEqual(0);
+
+      let middle = (range.max - range.min) / 2 + range.min;
+      expect(range.valueToRatio(middle)).toEqual(0.5);
+    });
+
+    it('step>range', () => {
+      let range = createRange();
+      range.max = 5000;
+      range.min = 2490;
+      range.step = 5900;
+      range.snaps = true;
+      expect(range.valueToRatio(7000)).toEqual(1);
+      expect(range.valueToRatio(5000)).toEqual(0);
+      expect(range.valueToRatio(2490)).toEqual(0);
+      expect(range.valueToRatio(2000)).toEqual(0);
+    });
+  });
+
+  describe('ratioToValue', () => {
+    it('step=1', () => {
+      let range = createRange();
+      range.max = 5000;
+      range.min = 2490;
+      range.step = 1;
+      range.snaps = true;
+      expect(range.ratioToValue(0)).toEqual(2490);
+      expect(range.ratioToValue(1)).toEqual(5000);
+
+      let middle = (range.max - range.min) / 2 + range.min;
+      expect(range.ratioToValue(0.5)).toEqual(middle);
+    });
+
+    it('step>range', () => {
+      let range = createRange();
+      range.max = 5000;
+      range.min = 2490;
+      range.step = 1;
+      expect(range.ratioToValue(0)).toEqual(2490);
+      expect(range.ratioToValue(1)).toEqual(5000);
+
+      let middle = (range.max - range.min) / 2 + range.min;
+      expect(range.ratioToValue(0.5)).toEqual(middle);
+    });
+  });
+
+});
+
+
+function createRange(): Range {
+  let form = new Form();
+  return new Range(form, mockHaptic(), null, mockConfig(), mockElementRef(), mockRenderer());
+}

src/util/haptic.ts

@@ -33,9 +33,11 @@ export class Haptic {
   plugin: any;
 
   constructor(platform: Platform) {
-    platform.ready().then(() => {
-      this.plugin = window.TapticEngine;
-    });
+    if (platform) {
+      platform.ready().then(() => {
+        this.plugin = window.TapticEngine;
+      });
+    }
   }
 
   /**

src/util/mock-providers.ts

@@ -22,6 +22,7 @@ import { UrlSerializer } from '../navigation/url-serializer';
 import { ViewController } from '../navigation/view-controller';
 
 import { NavControllerBase } from '../navigation/nav-controller-base';
+import { Haptic } from './haptic';
 
 export const mockConfig = function(config?: any, url: string = '/', platform?: Platform) {
   const c = new Config();
@@ -397,6 +398,10 @@ export const mockDeepLinkConfig = function(links?: any[]): DeepLinkConfig {
   };
 };
 
+export const mockHaptic = function (): Haptic {
+  return new Haptic(null);
+}
+
 export class MockView {}
 export class MockView1 {}
 export class MockView2 {}