feat(range): add md and wp styling, tweak ios styling

references #5422

src/components/range/range.ios.scss

@@ -3,26 +3,30 @@
 // iOS Range
 // --------------------------------------------------
 
+$range-ios-padding:                           8px 16px !default;
+
 $range-ios-slider-height:                     42px !default;
 
 $range-ios-hit-width:                         42px !default;
 $range-ios-hit-height:                        $range-ios-slider-height !default;
 
-$range-ios-bar-height:                        2px !default;
+$range-ios-bar-height:                        1px !default;
 $range-ios-bar-background-color:              #bdbdbd !default;
 $range-ios-bar-active-background-color:       color($colors-ios, primary) !default;
 
-$range-ios-knob-width:                        12px !default;
+$range-ios-knob-width:                        28px !default;
 $range-ios-knob-height:                       $range-ios-knob-width !default;
-$range-ios-knob-background-color:             $range-ios-bar-active-background-color !default;
+$range-ios-knob-box-shadow:                   0 3px 1px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.02) !default;
+$range-ios-knob-border-radius:                50% !default;
+$range-ios-knob-background-color:             #fff !default;
 
 $range-ios-tick-width:                        6px !default;
 $range-ios-tick-height:                       $range-ios-tick-width !default;
 $range-ios-tick-background-color:             $range-ios-bar-background-color !default;
 $range-ios-tick-active-background-color:      $range-ios-bar-active-background-color !default;
 
-$range-ios-pin-background-color:              $range-ios-bar-active-background-color !default;
+$range-ios-pin-background-color:              transparent !default;
-$range-ios-pin-color:                         color-contrast($colors-ios, $range-ios-pin-background-color) !default;
+$range-ios-pin-color:                         $text-ios-color !default;
 $range-ios-pin-font-size:                     12px !default;
 
 
@@ -44,8 +48,8 @@ ion-range {
   position: relative;
   display: block;
 
-  margin-top: -16px;
+  margin-top: -8px;
-  padding: 8px;
+  padding: $range-ios-padding;
 }
 
 .range-slider {
@@ -101,16 +105,18 @@ ion-range {
 
 .range-knob {
   position: absolute;
-  top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2);
+  top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px;
   left: ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2);
 
   width: $range-ios-knob-width;
   height: $range-ios-knob-height;
 
-  border-radius: 50%;
+  border-radius: $range-ios-knob-border-radius;
 
   background: $range-ios-knob-background-color;
 
+  box-shadow: $range-ios-knob-box-shadow;
+
   pointer-events: none;
 }
 
@@ -160,3 +166,16 @@ ion-range {
 .range-knob-pressed .range-pin {
   transform: translate3d(0, 0, 0) scale(1);
 }
+
+// Generate iOS Range Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  ion-range[#{$color-name}] {
+    .range-bar-active {
+      background: $color-base;
+    }
+  }
+
+}

src/components/range/range.md.scss

@@ -2,3 +2,181 @@
 
 // Material Design Range
 // --------------------------------------------------
+
+$range-md-padding:                           8px !default;
+
+$range-md-slider-height:                     42px !default;
+
+$range-md-hit-width:                         42px !default;
+$range-md-hit-height:                        $range-md-slider-height !default;
+
+$range-md-bar-height:                        2px !default;
+$range-md-bar-background-color:              #bdbdbd !default;
+$range-md-bar-active-background-color:       color($colors-md, primary) !default;
+
+$range-md-knob-width:                        12px !default;
+$range-md-knob-height:                       $range-md-knob-width !default;
+$range-md-knob-background-color:             $range-md-bar-active-background-color !default;
+
+$range-md-tick-width:                        0 !default;
+$range-md-tick-height:                       $range-md-tick-width !default;
+$range-md-tick-background-color:             $range-md-bar-background-color !default;
+$range-md-tick-active-background-color:      $range-md-bar-active-background-color !default;
+
+$range-md-pin-background-color:              $range-md-bar-active-background-color !default;
+$range-md-pin-color:                         color-contrast($colors-md, $range-md-bar-active-background-color) !default;
+$range-md-pin-font-size:                     12px !default;
+
+
+.item-range .item-inner {
+  overflow: visible;
+}
+
+.item-range .input-wrapper {
+  overflow: visible;
+
+  flex-direction: column;
+}
+
+.item-range ion-range {
+  width: 100%;
+}
+
+ion-range {
+  position: relative;
+  display: block;
+
+  margin-top: -16px;
+  padding: $range-md-padding;
+}
+
+.range-slider {
+  position: relative;
+
+  height: $range-md-slider-height;
+
+  cursor: pointer;
+}
+
+.range-bar {
+  position: absolute;
+  top: ($range-md-slider-height / 2);
+  left: 0;
+
+  width: 100%;
+  height: $range-md-bar-height;
+
+  background: $range-md-bar-background-color;
+
+  pointer-events: none;
+}
+
+.range-pressed .range-bar-active {
+  will-change: left, right;
+}
+
+.range-pressed .range-knob-handle {
+  will-change: left;
+}
+
+.range-bar-active {
+  bottom: 0;
+
+  width: auto;
+
+  background: $range-md-bar-active-background-color;
+}
+
+.range-knob-handle {
+  position: absolute;
+  top: ($range-md-slider-height / 2);
+  left: 0%;
+
+  margin-top: -($range-md-hit-height / 2);
+  margin-left: -($range-md-hit-width / 2);
+
+  width: $range-md-hit-width;
+  height: $range-md-hit-height;
+
+  text-align: center;
+}
+
+.range-knob {
+  position: absolute;
+  top: ($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2);
+  left: ($range-md-hit-width / 2) - ($range-md-knob-width / 2);
+
+  width: $range-md-knob-width;
+  height: $range-md-knob-height;
+
+  border-radius: 50%;
+
+  background: $range-md-knob-background-color;
+
+  pointer-events: none;
+}
+
+.range-tick {
+  position: absolute;
+  top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2);
+
+  margin-left: ($range-md-tick-width / 2) * -1;
+
+  width: $range-md-tick-width;
+  height: $range-md-tick-height;
+
+  border-radius: 50%;
+
+  background: $range-md-tick-background-color;
+
+  pointer-events: none;
+}
+
+.range-tick-active {
+  background: $range-md-tick-active-background-color;
+}
+
+.range-pin {
+  position: relative;
+  top: -20px;
+  display: inline-block;
+
+  padding: 8px;
+
+  min-width: 28px;
+
+  border-radius: 50px;
+
+  font-size: $range-md-pin-font-size;
+
+  text-align: center;
+
+  color: $range-md-pin-color;
+
+  background: $range-md-pin-background-color;
+
+  transform: translate3d(0, 28px, 0) scale(.01);
+  transition: transform 120ms ease;
+}
+
+.range-knob-pressed .range-pin {
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.range-knob-pressed .range-knob {
+  transform: scale(1.5);
+}
+
+// Generate iOS Range Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  ion-range[#{$color-name}] {
+    .range-bar-active,
+    .range-knob {
+      background: $color-base;
+    }
+  }
+
+}

src/components/range/range.wp.scss

@@ -2,3 +2,178 @@
 
 // Windows Range
 // --------------------------------------------------
+
+$range-wp-padding:                           8px !default;
+
+$range-wp-slider-height:                     42px !default;
+
+$range-wp-hit-width:                         42px !default;
+$range-wp-hit-height:                        $range-wp-slider-height !default;
+
+$range-wp-bar-height:                        2px !default;
+$range-wp-bar-background-color:              #bdbdbd !default;
+$range-wp-bar-active-background-color:       color($colors-wp, primary) !default;
+
+$range-wp-knob-width:                        8px !default;
+$range-wp-knob-height:                       $range-wp-knob-width * 3 !default;
+$range-wp-knob-background-color:             $range-wp-bar-active-background-color !default;
+$range-wp-knob-border-radius:                $range-wp-knob-width / 2 !default;
+
+$range-wp-tick-width:                        0 !default;
+$range-wp-tick-height:                       $range-wp-tick-width !default;
+$range-wp-tick-background-color:             $range-wp-bar-background-color !default;
+$range-wp-tick-active-background-color:      $range-wp-bar-active-background-color !default;
+
+$range-wp-pin-background-color:              $range-wp-bar-active-background-color !default;
+$range-wp-pin-color:                         color-contrast($colors-wp, $range-wp-bar-active-background-color) !default;
+$range-wp-pin-font-size:                     12px !default;
+
+
+.item-range .item-inner {
+  overflow: visible;
+}
+
+.item-range .input-wrapper {
+  overflow: visible;
+
+  flex-direction: column;
+}
+
+.item-range ion-range {
+  width: 100%;
+}
+
+ion-range {
+  position: relative;
+  display: block;
+
+  margin-top: -16px;
+  padding: $range-wp-padding;
+}
+
+.range-slider {
+  position: relative;
+
+  height: $range-wp-slider-height;
+
+  cursor: pointer;
+}
+
+.range-bar {
+  position: absolute;
+  top: ($range-wp-slider-height / 2);
+  left: 0;
+
+  width: 100%;
+  height: $range-wp-bar-height;
+
+  background: $range-wp-bar-background-color;
+
+  pointer-events: none;
+}
+
+.range-pressed .range-bar-active {
+  will-change: left, right;
+}
+
+.range-pressed .range-knob-handle {
+  will-change: left;
+}
+
+.range-bar-active {
+  bottom: 0;
+
+  width: auto;
+
+  background: $range-wp-bar-active-background-color;
+}
+
+.range-knob-handle {
+  position: absolute;
+  top: ($range-wp-slider-height / 2);
+  left: 0%;
+
+  margin-top: -($range-wp-hit-height / 2);
+  margin-left: -($range-wp-hit-width / 2);
+
+  width: $range-wp-hit-width;
+  height: $range-wp-hit-height;
+
+  text-align: center;
+}
+
+.range-knob {
+  position: absolute;
+  top: ($range-wp-hit-height / 2) - ($range-wp-knob-height / 2) + ($range-wp-bar-height / 2);
+  left: ($range-wp-hit-width / 2) - ($range-wp-knob-width / 2);
+
+  width: $range-wp-knob-width;
+  height: $range-wp-knob-height;
+
+  border-radius: $range-wp-knob-border-radius;
+
+  background: $range-wp-knob-background-color;
+
+  pointer-events: none;
+}
+
+.range-tick {
+  position: absolute;
+  top: ($range-wp-hit-height / 2) - ($range-wp-tick-height / 2) + ($range-wp-bar-height / 2);
+
+  margin-left: ($range-wp-tick-width / 2) * -1;
+
+  width: $range-wp-tick-width;
+  height: $range-wp-tick-height;
+
+  border-radius: 50%;
+
+  background: $range-wp-tick-background-color;
+
+  pointer-events: none;
+}
+
+.range-tick-active {
+  background: $range-wp-tick-active-background-color;
+}
+
+.range-pin {
+  position: relative;
+  top: -20px;
+  display: inline-block;
+
+  padding: 8px;
+
+  min-width: 28px;
+
+  border-radius: 50px;
+
+  font-size: $range-wp-pin-font-size;
+
+  text-align: center;
+
+  color: $range-wp-pin-color;
+
+  background: $range-wp-pin-background-color;
+
+  transform: translate3d(0, 28px, 0) scale(.01);
+  transition: transform 120ms ease;
+}
+
+.range-knob-pressed .range-pin {
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+// Generate iOS Range Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  ion-range[#{$color-name}] {
+    .range-bar-active,
+    .range-knob {
+      background: $color-base;
+    }
+  }
+
+}

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

@@ -27,7 +27,7 @@
     <ion-item>
       <div item-left>{{singleValue2}}</div>
       <ion-label>init=150, min=-200, max=200</ion-label>
-      <ion-range min="-200" max="200" [(ngModel)]="singleValue2"></ion-range>
+      <ion-range min="-200" max="200" [(ngModel)]="singleValue2" secondary></ion-range>
       <div item-right>{{singleValue2}}</div>
     </ion-item>
 
@@ -43,7 +43,7 @@
 
     <ion-item>
       <ion-label>dual, {{dualValue | json}}</ion-label>
-      <ion-range dualKnobs="true" [(ngModel)]="dualValue"></ion-range>
+      <ion-range dualKnobs="true" [(ngModel)]="dualValue" danger></ion-range>
     </ion-item>
 
     <ion-item>