From c036cb0924b027211afe6adf349cbdcec0ea4a30 Mon Sep 17 00:00:00 2001
From: lukejoliat <lukejoliat@gmail.com>
Date: Fri, 7 Dec 2018 10:42:06 -0500
Subject: [PATCH] feat(range): add support for range bar border radius (#16519)

---
 core/api.txt                             | 1 +
 core/src/components/range/range.ios.scss | 1 +
 core/src/components/range/range.md.scss  | 1 +
 core/src/components/range/range.scss     | 2 ++
 core/src/components/range/readme.md      | 1 +
 5 files changed, 6 insertions(+)

diff --git a/core/api.txt b/core/api.txt
index 499de5e3c3..40ace86872 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -785,6 +785,7 @@ ion-range,event,ionChange,InputChangeEvent,true
 ion-range,event,ionFocus,void,true
 ion-range,css-prop,--bar-background
 ion-range,css-prop,--bar-background-active
+ion-range,css-prop,--bar-border-radius
 ion-range,css-prop,--bar-height
 ion-range,css-prop,--height
 ion-range,css-prop,--knob-background
diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss
index d7eaa4c600..1c599afc44 100644
--- a/core/src/components/range/range.ios.scss
+++ b/core/src/components/range/range.ios.scss
@@ -12,6 +12,7 @@
   --bar-height: #{$range-ios-bar-height};
   --bar-background: #{$range-ios-bar-background-color};
   --bar-background-active: #{ion-color(primary, base)};
+  --bar-border-radius: 0;
   --height: #{$range-ios-slider-height};
 
   @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss
index 59127f46e0..ca8b06d85a 100644
--- a/core/src/components/range/range.md.scss
+++ b/core/src/components/range/range.md.scss
@@ -12,6 +12,7 @@
   --bar-height: #{$range-md-bar-height};
   --bar-background: #{ion-color(primary, base, 0.26)};
   --bar-background-active: #{ion-color(primary, base)};
+  --bar-border-radius: 0;
   --height: #{$range-md-slider-height};
   --pin-background: #{ion-color(primary, base)};
   --pin-color: #{ion-color(primary, contrast)};
diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss
index 759ca4c94b..a5c9142a54 100644
--- a/core/src/components/range/range.scss
+++ b/core/src/components/range/range.scss
@@ -8,6 +8,7 @@
    * @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 --bar-border-radius: Border radius 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
@@ -91,6 +92,7 @@
 }
 
 .range-bar {
+  @include border-radius(var(--bar-border-radius));
   @include position(calc((var(--height) - var(--bar-height)) / 2), null, null, 0);
   position: absolute;
 
diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md
index afa19b6537..8e98f146bd 100644
--- a/core/src/components/range/readme.md
+++ b/core/src/components/range/readme.md
@@ -117,6 +117,7 @@ left or right of the range.
 | ------------------------- | ---------------------------------- |
 | `--bar-background`        | Background of the range bar        |
 | `--bar-background-active` | Background of the active range bar |
+| `--bar-border-radius`     | Border radius of the range bar     |
 | `--bar-height`            | Height of the range bar            |
 | `--height`                | Height of the range                |
 | `--knob-background`       | Background of the range knob       |