refactor(range): rename steps back to step, fix icon and slot name

Adds documentation for breaking changes for range.

packages/BREAKING.md

@@ -14,6 +14,7 @@ A list of the breaking changes introduced in Ionic Angular v4.
 - [Nav](#nav)
 - [Option](#option)
 - [Radio](#radio)
+- [Range](#range)
 - [Segment](#segment)
 - [Toolbar](#toolbar)
 - [Sass](#sass)
@@ -53,7 +54,7 @@ Button should now be written as an `<ion-button>` element. Ionic will determine
 </ion-button>
 ```
 
-### Icon Attributes Renamed
+### Attributes Renamed
 
 Previously to style icons inside of a button the following attributes were used: `icon-left`, `icon-right`, (and with the added support of RTL) `icon-start`, `icon-end`.
 
@@ -468,11 +469,49 @@ Radio group has been changed to an element. It should now be wrapped around any
 </ion-list>
 ```
 
-### Order for Windows
+### Windows Mode Order
 
 Previously a radio inside of an item in Windows Platform mode would align itself to the start of the item. This has been removed, `slot` should always be used to align a radio inside of an item now.
 
 
+## Range
+
+### Attributes Renamed
+
+Previously to place content inside of a range the following attributes were used: `range-left`, `range-right`, (and with the added support of RTL) `range-start`, `range-end`.
+
+These have been renamed to the following:
+
+| Old Property                | New Property   | Property Behavior                                                     |
+|-----------------------------|----------------|-----------------------------------------------------------------------|
+| `range-left`, `range-start` | `slot="start"` | Positions to the left of the range in LTR, and to the right in RTL.   |
+| `range-right`, `range-end`  | `slot="end"`   | Positions to the right of the range in LTR, and to the left in RTL.   |
+
+
+**Old Usage Example:**
+
+```html
+<ion-range>
+  <ion-icon name="sunny" range-left></ion-icon>
+  <ion-icon name="sunny" range-right></ion-icon>
+</ion-range>
+
+<ion-range>
+  <ion-icon name="sunny" range-start></ion-icon>
+  <ion-icon name="sunny" range-end></ion-icon>
+</ion-range>
+```
+
+**New Usage Example:**
+
+```html
+<ion-range>
+  <ion-icon name="sunny" slot="start"></ion-icon>
+  <ion-icon name="sunny" slot="end"></ion-icon>
+</ion-range>
+```
+
+
 ## Segment
 
 The markup hasn't changed for Segments, but now writing `<ion-segment-button>` will render a native button element inside of it.

packages/core/src/components.d.ts

@@ -2212,7 +2212,7 @@ declare global {
           min?: number,
           pin?: boolean,
           snaps?: boolean,
-          steps?: number,
+          step?: number,
           value?: any
       }
   }

packages/core/src/components/icon/icon.scss

@@ -9,7 +9,8 @@ ion-icon {
   font-size: 1.2em;
 }
 
-ion-icon[small] {
+ion-icon[small],
+ion-icon[small][slot] {
   min-height: 1.1em;
 
   font-size: 1.1em;

packages/core/src/components/range/range.tsx

@@ -114,7 +114,7 @@ export class Range implements BaseInputComponent {
   /**
    * @input {number} Specifies the value granularity. Defaults to `1`.
    */
-  @Prop() steps: number = 1;
+  @Prop() step: number = 1;
 
   /**
    * @input {string} the value of the range.
@@ -196,7 +196,7 @@ export class Range implements BaseInputComponent {
 
   createTicks() {
     if (this.snaps) {
-      for (let value = this.min; value <= this.max; value += this.steps) {
+      for (let value = this.min; value <= this.max; value += this.step) {
         let ratio = this.valueToRatio(value);
         this.ticks.push({
           ratio,
@@ -226,14 +226,14 @@ export class Range implements BaseInputComponent {
   }
 
   valueToRatio(value: number) {
-    value = Math.round((value - this.min) / this.steps) * this.steps;
+    value = Math.round((value - this.min) / this.step) * this.step;
     value = value / (this.max - this.min);
     return clamp(0, value, 1);
   }
 
   ratioToValue(ratio: number) {
     ratio = Math.round((this.max - this.min) * ratio);
-    ratio = Math.round(ratio / this.steps) * this.steps + this.min;
+    ratio = Math.round(ratio / this.step) * this.step + this.min;
     return clamp(this.min, ratio, this.max);
   }
 
@@ -329,7 +329,7 @@ export class Range implements BaseInputComponent {
 
   @Listen('ionIncrease, ionDecrease')
   keyChng(ev: RangeEvent) {
-    const step = this.steps;
+    const step = this.step;
     if (ev.detail.knob === 'knobB') {
       if (!!ev.detail.isIncrease) {
         this.valB += step;
@@ -404,7 +404,7 @@ export class Range implements BaseInputComponent {
 
   protected render() {
     return [
-      <slot name='range-start'></slot>,
+      <slot name='start'></slot>,
       <ion-gesture
         {...{
           disableScroll: true,
@@ -462,7 +462,7 @@ export class Range implements BaseInputComponent {
             : null}
         </div>
       </ion-gesture>,
-      <slot name='range-end'></slot>
+      <slot name='end'></slot>
     ];
   }
 }

packages/core/src/components/range/test/basic.html

@@ -24,9 +24,6 @@
           <ion-item>
             <ion-range value="20"></ion-range>
           </ion-item>
-          <ion-item>
-            <ion-range value="40" color="secondary"></ion-range>
-          </ion-item>
           <ion-item>
             <ion-range value="60" color="light"></ion-range>
           </ion-item>
@@ -34,7 +31,14 @@
             <ion-range value="80" color="dark"></ion-range>
           </ion-item>
           <ion-item>
-            <ion-range value="100" color="danger"></ion-range>
+            <ion-range pin="true" color="secondary" value="86">
+              <ion-icon small name="ios-sunny-outline" slot="start"></ion-icon>
+              <ion-icon name="ios-sunny" slot="end"></ion-icon>
+            </ion-range>
+            <ion-range pin="true" color="danger" value="54">
+              <ion-icon small name="ios-thermometer-outline" slot="start"></ion-icon>
+              <ion-icon name="ios-thermometer" slot="end"></ion-icon>
+            </ion-range>
           </ion-item>
         </ion-list>
 
@@ -60,19 +64,15 @@
           <ion-item>
             <ion-range pin="true"></ion-range>
           </ion-item>
+          <ion-item>
+            <ion-range min="-200" max="200" steps="10" snaps="true" pin="true"></ion-range>
+          </ion-item>
           <ion-item>
             <ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range>
           </ion-item>
           <ion-item>
             <ion-range dual-knobs="true" id="multiKnob"></ion-range>
           </ion-item>
-          <ion-item>
-            <ion-range color="danger">
-              <ion-icon small name="thermometer" slot="range-start"></ion-icon>
-              <ion-icon name="thermometer" slot="range-end"></ion-icon>
-            </ion-range>
-          </ion-item>
-
         </ion-list>
 
         <ion-button onclick="elTest()">Test</ion-button>