fix(range): add and document custom properties

references #14850
references #14808

Author: camwiegert

core/src/components/range/range.ios.scss

@@ -11,11 +11,16 @@
   --knob-size: 28px;
   --bar-height: #{$range-ios-bar-height};
   --bar-background: #{$range-ios-bar-background-color};
+  --bar-background-active: #{ion-color(primary, base)};
   --height: #{$range-ios-slider-height};
 
   @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
 }
 
+:host(.ion-color) .range-bar-active,
+:host(.ion-color) .range-tick-active {
+  background: current-color(base);
+}
 
 :host(.range-has-pin) {
   @include padding($range-ios-padding-vertical + $range-ios-pin-font-size, null, null, null);
@@ -26,7 +31,7 @@
 
   width: auto;
 
-  background: $range-ios-bar-active-background-color;
+  background: var(--bar-background-active);
 }
 
 .range-tick {
@@ -44,7 +49,7 @@
 }
 
 .range-tick-active {
-  background: $range-ios-tick-active-background-color;
+  background: var(--bar-background-active);
 }
 
 .range-pin {

core/src/components/range/range.md.scss

@@ -6,18 +6,29 @@
 
 :host {
   --knob-border-radius: 50%;
-  --knob-background: #{$range-md-knob-background-color};
+  --knob-background: var(--bar-background-active);
   --knob-box-shadow: none;
   --knob-size: 18px;
   --bar-height: #{$range-md-bar-height};
   --bar-background: #{$range-md-bar-background-color};
+  --bar-background-active: #{ion-color(primary, base)};
   --height: #{$range-md-slider-height};
+  --pin-background: #{ion-color(primary, base)};
+  --pin-color: #{ion-color(primary, contrast)};
 
   @include padding($range-md-padding-vertical, $range-md-padding-horizontal);
 
   font-size: $range-md-pin-font-size;
 }
 
+:host(.ion-color) .range-bar-active,
+:host(.ion-color) .range-knob,
+:host(.ion-color) .range-pin,
+:host(.ion-color) .range-pin::before {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
 // TODO: REVIEW
 // .range-md [slot="range-start"] {
 //   @include margin(0, 12px, 0, 0);
@@ -36,7 +47,7 @@
 
   width: auto;
 
-  background: $range-md-bar-active-background-color;
+  background: var(--bar-background-active);
 }
 
 .range-knob {
@@ -78,10 +89,13 @@
   position: relative;
   top: -20px;
 
+  background: var(--pin-background);
+  color: var(--pin-color);
+
   min-width: 28px;
   height: 28px;
 
-  transition: transform 120ms ease, background-color 120ms ease;
+  transition: transform 120ms ease, background 120ms ease;
 
   text-align: center;
 
@@ -97,9 +111,9 @@
 
     transform: rotate(-45deg);
 
-    transition: background-color 120ms ease;
+    transition: background 120ms ease;
 
-    background: $range-md-pin-background-color;
+    background: var(--pin-background);
 
     content: "";
     z-index: -1;

core/src/components/range/range.scss

@@ -4,9 +4,17 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --bar-background: Background of the range bar
+   * @prop --bar-background-active: Background of the active range bar
+   * @prop --bar-height: Height of the range bar
+   * @prop --height: Height of the range
+   * @prop --knob-background: Background of the range knob
+   * @prop --knob-border-radius: Border radius of the range knob
+   * @prop --knob-box-shadow: Box shadow of the range knob
+   * @prop --knob-size: Size of the range knob
+   */
   --knob-handle-size: calc(var(--knob-size) * 2);
-  --ion-color-base: #{ion-color(primary, base)};
-  --ion-color-contrast: #{ion-color(primary, contrast)};
 
   display: flex;
   position: relative;

core/src/components/range/readme.md

@@ -43,6 +43,20 @@ left or right of the range.
 | `ionStyle`  | Emitted when the styles change.              |
 
 
+## CSS Custom Properties
+
+| Name                      | Description                        |
+| ------------------------- | ---------------------------------- |
+| `--bar-background`        | Background of the range bar        |
+| `--bar-background-active` | Background of the active range bar |
+| `--bar-height`            | Height of the range bar            |
+| `--height`                | Height of the range                |
+| `--knob-background`       | Background of the range knob       |
+| `--knob-border-radius`    | Border radius of the range knob    |
+| `--knob-box-shadow`       | Box shadow of the range knob       |
+| `--knob-size`             | Size of the range knob             |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -85,10 +85,10 @@
           <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-range min="-200" max="200" step="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-range min="1000" max="2000" step="100" snaps="true" id="range"></ion-range>
         </ion-item>
         <ion-item>
           <ion-range dual-knobs="true" id="multiKnob"></ion-range>

core/src/components/range/test/standalone/index.html

@@ -21,5 +21,17 @@
     <ion-icon size="small" name="ios-thermometer-outline" slot="start"></ion-icon>
     <ion-icon name="ios-thermometer" slot="end"></ion-icon>
   </ion-range>
+  <ion-range value="50" pin class="custom"></ion-range>
+
+  <style>
+    .custom {
+      --knob-background: purple;
+      --bar-background: papayawhip;
+      --bar-background-active: hotpink;
+      --bar-height: 3px;
+      --pin-background: pink;
+      --pin-color: purple;
+    }
+  </style>
 </body>
 </html>