From 01021609a1060625dda10063fb818b3449c7839c Mon Sep 17 00:00:00 2001
From: gijsbotje <botje_gijs@hotmail.com>
Date: Sun, 13 Aug 2017 03:26:33 +0200
Subject: [PATCH 01/13] added the styling

---
 scss/_custom-forms.scss | 102 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index b58fffb8f5fa..53de8c46ba9f 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -252,3 +252,105 @@
     }
   }
 }
+
+// Range
+//
+// Replace the browser default range with a custom one.
+.custom-range {
+  width: 100%;
+  padding-left: 0;
+  background-color: transparent;
+  -webkit-appearance: none;
+
+  &:focus {
+    outline: none;
+
+    &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
+      box-shadow: $custom-control-indicator-focus-box-shadow;
+    }
+  }
+
+  &::-moz-focus-inner, &:-moz-focusring {
+    border: 0;
+    outline: none;
+  }
+
+  &:active {
+
+    &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
+      background-color: $custom-control-indicator-active-bg;
+    }
+  }
+
+  // 	webkit styling
+  &::-webkit-slider-thumb {
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    margin-top: -($custom-control-indicator-size * .25);
+    background-color: $custom-control-indicator-checked-bg;
+    border: 0;
+    border-radius: $custom-control-indicator-size;
+    -webkit-appearance: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: $custom-control-indicator-size * .5;
+    color: transparent;
+    cursor: pointer;
+    background-color: $custom-control-indicator-bg;
+    border-color: transparent;
+    border-radius: $custom-control-indicator-size;
+  }
+
+  // 	firefox styling
+  &::-moz-range-thumb {
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    background-color: $custom-control-indicator-checked-bg;
+    border: 0;
+    border-radius: $custom-control-indicator-size;
+    -webkit-appearance: none;
+  }
+
+  &::-moz-range-track {
+    width: 100%;
+    height: $custom-control-indicator-size * .5;
+    color: transparent;
+    cursor: pointer;
+    background-color: $custom-control-indicator-bg;
+    border-color: transparent;
+    border-radius: $custom-control-indicator-size;
+  }
+
+  // 	IE styling
+  &::-ms-thumb {
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    background-color: $custom-control-indicator-checked-bg;
+    border: 0;
+    border-radius: $custom-control-indicator-size;
+    -webkit-appearance: none;
+  }
+
+  &::-ms-track {
+    width: 100%;
+    height: $custom-control-indicator-size * .5;
+    color: transparent;
+    cursor: pointer;
+    background-color: transparent;
+    border-color: transparent;
+    border-width: ($custom-control-indicator-size * .5);
+  }
+
+  &::-ms-fill-lower {
+    background-color: $custom-control-indicator-bg;
+    border-radius: $custom-control-indicator-size;
+  }
+
+  &::-ms-fill-upper {
+    margin-right: 15px;
+    background-color: $custom-control-indicator-bg;
+    border-radius: $custom-control-indicator-size;
+  }
+}

From c02fa07e5c48c6f00df388974eb23d9da2998f23 Mon Sep 17 00:00:00 2001
From: gijsbotje <botje_gijs@hotmail.com>
Date: Sun, 13 Aug 2017 03:27:49 +0200
Subject: [PATCH 02/13] added the documentation

---
 docs/4.0/components/forms.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 1ae5c81f3b82..823a03788aed 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1017,6 +1017,20 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th
 </select>
 {% endexample %}
 
+### Range control
+
+Custom `<input type="range">` controls need only a custom class, `.custom-range` to trigger the custom styles.
+
+{% example html %}
+<input type="range" class="custom-range">
+{% endexample %}
+
+Additionally you can add steps by defining `min` and `max` attributes.
+
+{% example html %}
+<input type="range" class="custom-range" min="0" max="5">
+{% endexample %}
+
 ### File browser
 
 The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.

From 0355a3132b163afd53b633cdbf35ed6a48cf455d Mon Sep 17 00:00:00 2001
From: Gijs Boddeus <botje_gijs@hotmail.com>
Date: Sun, 13 Aug 2017 16:24:22 +0200
Subject: [PATCH 03/13] update for one rule per line

---
 scss/_custom-forms.scss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 2a7e9c83cf5a..4aff4750d336 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -266,19 +266,24 @@
   &:focus {
     outline: none;
 
-    &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
+    &::-webkit-slider-thumb, 
+    &::-moz-range-thumb, 
+    &::-ms-thumb {
       box-shadow: $custom-control-indicator-focus-box-shadow;
     }
   }
 
-  &::-moz-focus-inner, &:-moz-focusring {
+  &::-moz-focus-inner, 
+  &:-moz-focusring {
     border: 0;
     outline: none;
   }
 
   &:active {
 
-    &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb {
+    &::-webkit-slider-thumb, 
+    &::-moz-range-thumb, 
+    &::-ms-thumb {
       background-color: $custom-control-indicator-active-bg;
     }
   }

From 126f7318de61dfc3199424eaaf36a80fd55bfa95 Mon Sep 17 00:00:00 2001
From: Gijs Boddeus <botje_gijs@hotmail.com>
Date: Sun, 13 Aug 2017 16:28:34 +0200
Subject: [PATCH 04/13] fix hound error: trailing whitespace

---
 scss/_custom-forms.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 4aff4750d336..4bef854cced4 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -266,14 +266,14 @@
   &:focus {
     outline: none;
 
-    &::-webkit-slider-thumb, 
-    &::-moz-range-thumb, 
+    &::-webkit-slider-thumb,
+    &::-moz-range-thumb,
     &::-ms-thumb {
       box-shadow: $custom-control-indicator-focus-box-shadow;
     }
   }
 
-  &::-moz-focus-inner, 
+  &::-moz-focus-inner,
   &:-moz-focusring {
     border: 0;
     outline: none;
@@ -281,8 +281,8 @@
 
   &:active {
 
-    &::-webkit-slider-thumb, 
-    &::-moz-range-thumb, 
+    &::-webkit-slider-thumb,
+    &::-moz-range-thumb,
     &::-ms-thumb {
       background-color: $custom-control-indicator-active-bg;
     }

From e9f63e5d658d19b95997c37ad47c25f99e87b3c8 Mon Sep 17 00:00:00 2001
From: Gijs Boddeus <botje_gijs@hotmail.com>
Date: Sun, 13 Aug 2017 16:36:40 +0200
Subject: [PATCH 05/13] trimmed off vendor prefixes

---
 scss/_custom-forms.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 4bef854cced4..f95575bb11cf 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -261,7 +261,7 @@
   width: 100%;
   padding-left: 0;
   background-color: transparent;
-  -webkit-appearance: none;
+  appearance: none;
 
   &:focus {
     outline: none;
@@ -296,7 +296,7 @@
     background-color: $custom-control-indicator-checked-bg;
     border: 0;
     border-radius: $custom-control-indicator-size;
-    -webkit-appearance: none;
+    appearance: none;
   }
 
   &::-webkit-slider-runnable-track {
@@ -316,7 +316,7 @@
     background-color: $custom-control-indicator-checked-bg;
     border: 0;
     border-radius: $custom-control-indicator-size;
-    -webkit-appearance: none;
+    appearance: none;
   }
 
   &::-moz-range-track {
@@ -336,7 +336,7 @@
     background-color: $custom-control-indicator-checked-bg;
     border: 0;
     border-radius: $custom-control-indicator-size;
-    -webkit-appearance: none;
+    appearance: none;
   }
 
   &::-ms-track {

From 8b29be0f743e23057718e96b9e8187b55cb21409 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Feb 2018 18:10:04 -0800
Subject: [PATCH 06/13] Add note about track and thumb

---
 docs/4.0/components/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 91df95f11008..48feb2f75649 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1173,7 +1173,7 @@ As is the `size` attribute:
 
 ### Range
 
-Create custom `<input type="range">` controls with `.custom-range`.
+Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
 
 {% example html %}
 <input type="range" class="custom-range">

From 6c620de01fdbfed50c34849d3d17d601d0bc48d3 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Feb 2018 18:11:53 -0800
Subject: [PATCH 07/13] Psuedo-elements must be split across multiple rulesets
 to have an affect

---
 scss/_custom-forms.scss | 48 ++++++++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index aaefd3cfbf57..3f0ab1057c71 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -298,7 +298,10 @@
 
 // Range
 //
-// Replace the browser default range with a custom one.
+// Style range inputs the same across browsers. Vendor-specific rules for psuedo
+// elements cannot be mixed. As such, there are no shared styles for focus or
+// active states on prefixed selectors.
+
 .custom-range {
   width: 100%;
   padding-left: 0;
@@ -307,12 +310,6 @@
 
   &:focus {
     outline: none;
-
-    &::-webkit-slider-thumb,
-    &::-moz-range-thumb,
-    &::-ms-thumb {
-      box-shadow: $custom-control-indicator-focus-box-shadow;
-    }
   }
 
   &::-moz-focus-inner,
@@ -321,16 +318,8 @@
     outline: none;
   }
 
-  &:active {
-
-    &::-webkit-slider-thumb,
-    &::-moz-range-thumb,
-    &::-ms-thumb {
-      background-color: $custom-control-indicator-active-bg;
-    }
   }
 
-  // 	webkit styling
   &::-webkit-slider-thumb {
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
@@ -339,6 +328,15 @@
     border: 0;
     border-radius: $custom-control-indicator-size;
     appearance: none;
+
+    &:focus {
+      outline: none;
+      box-shadow: $custom-control-indicator-focus-box-shadow;
+    }
+
+    &:active {
+      background-color: $custom-control-indicator-active-bg;
+    }
   }
 
   &::-webkit-slider-runnable-track {
@@ -351,7 +349,6 @@
     border-radius: $custom-control-indicator-size;
   }
 
-  // 	firefox styling
   &::-moz-range-thumb {
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
@@ -359,6 +356,15 @@
     border: 0;
     border-radius: $custom-control-indicator-size;
     appearance: none;
+
+    &:focus {
+      outline: none;
+      box-shadow: $custom-control-indicator-focus-box-shadow;
+    }
+
+    &:active {
+      background-color: $custom-control-indicator-active-bg;
+    }
   }
 
   &::-moz-range-track {
@@ -371,7 +377,6 @@
     border-radius: $custom-control-indicator-size;
   }
 
-  // 	IE styling
   &::-ms-thumb {
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
@@ -379,6 +384,15 @@
     border: 0;
     border-radius: $custom-control-indicator-size;
     appearance: none;
+
+    &:focus {
+      outline: none;
+      box-shadow: $custom-control-indicator-focus-box-shadow;
+    }
+
+    &:active {
+      background-color: $custom-control-indicator-active-bg;
+    }
   }
 
   &::-ms-track {

From 302337ca177a875977a44980ec7c48b67dc11469 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Feb 2018 18:12:07 -0800
Subject: [PATCH 08/13] Fix firefox inner focus

---
 scss/_custom-forms.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 3f0ab1057c71..a760d3b7607e 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -312,12 +312,8 @@
     outline: none;
   }
 
-  &::-moz-focus-inner,
-  &:-moz-focusring {
+  &::-moz-focus-outer {
     border: 0;
-    outline: none;
-  }
-
   }
 
   &::-webkit-slider-thumb {

From 28d7191647dba5318ce377402f0ebffc4157613e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Feb 2018 18:12:20 -0800
Subject: [PATCH 09/13] Seems that FF is the only one affected by this

---
 scss/_custom-forms.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index a760d3b7607e..bc8672e859ef 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -304,7 +304,7 @@
 
 .custom-range {
   width: 100%;
-  padding-left: 0;
+  padding-left: 0; // Firefox specific
   background-color: transparent;
   appearance: none;
 

From 5d6c642cabb48a0decfc8fc0a77f5a7045b1885a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Feb 2018 19:52:59 -0800
Subject: [PATCH 10/13] Add support for gradients

---
 scss/_custom-forms.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index bc8672e859ef..2beff14cfde5 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -320,7 +320,7 @@
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
     margin-top: -($custom-control-indicator-size * .25);
-    background-color: $custom-control-indicator-checked-bg;
+    @include gradient-bg($custom-control-indicator-checked-bg);
     border: 0;
     border-radius: $custom-control-indicator-size;
     appearance: none;
@@ -331,7 +331,7 @@
     }
 
     &:active {
-      background-color: $custom-control-indicator-active-bg;
+      @include gradient-bg($custom-control-indicator-active-bg);
     }
   }
 
@@ -348,7 +348,7 @@
   &::-moz-range-thumb {
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
-    background-color: $custom-control-indicator-checked-bg;
+    @include gradient-bg($custom-control-indicator-checked-bg);
     border: 0;
     border-radius: $custom-control-indicator-size;
     appearance: none;
@@ -359,7 +359,7 @@
     }
 
     &:active {
-      background-color: $custom-control-indicator-active-bg;
+      @include gradient-bg($custom-control-indicator-active-bg);
     }
   }
 
@@ -376,7 +376,7 @@
   &::-ms-thumb {
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
-    background-color: $custom-control-indicator-checked-bg;
+    @include gradient-bg($custom-control-indicator-checked-bg);
     border: 0;
     border-radius: $custom-control-indicator-size;
     appearance: none;
@@ -387,7 +387,7 @@
     }
 
     &:active {
-      background-color: $custom-control-indicator-active-bg;
+      @include gradient-bg($custom-control-indicator-active-bg);
     }
   }
 

From 1a4ece0eb638398f10ac5b03a7ff105c6ef74c8b Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 15 Feb 2018 18:47:20 -0800
Subject: [PATCH 11/13] Add labels, clarify min/max changes

---
 docs/4.0/components/forms.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 48feb2f75649..d74adda49dfc 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1176,13 +1176,15 @@ As is the `size` attribute:
 Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
 
 {% example html %}
-<input type="range" class="custom-range">
+<label for="customRange1">Example range</label>
+<input type="range" class="custom-range" id="customRange1">
 {% endexample %}
 
-Additionally, you may specify steps by adding `min` and `max` attributes.
+Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
 
 {% example html %}
-<input type="range" class="custom-range" min="0" max="5">
+<label for="customRange2">Example range</label>
+<input type="range" class="custom-range" min="0" max="5" id="customRange2">
 {% endexample %}
 
 ### File browser

From 5451a38f23eb711d0d371ade51b94f1f6125bc23 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 17 Feb 2018 14:26:36 -0800
Subject: [PATCH 12/13] add step example

---
 docs/4.0/components/forms.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index d74adda49dfc..fee34d019f8e 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1187,6 +1187,13 @@ Range inputs have implicit values for `min` and `max`—`0` and `100`, respectiv
 <input type="range" class="custom-range" min="0" max="5" id="customRange2">
 {% endexample %}
 
+By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.
+
+{% example html %}
+<label for="customRange3">Example range</label>
+<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
+{% endexample %}
+
 ### File browser
 
 The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.

From 7a2406a878c10b7872d6c6e360a651b88dfad123 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 18 Feb 2018 21:08:36 -0800
Subject: [PATCH 13/13] add custom range vars

---
 scss/_custom-forms.scss | 92 ++++++++++++++++++++++-------------------
 scss/_variables.scss    | 16 +++++++
 2 files changed, 65 insertions(+), 43 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 2beff14cfde5..27de8769a449 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -317,98 +317,104 @@
   }
 
   &::-webkit-slider-thumb {
-    width: $custom-control-indicator-size;
-    height: $custom-control-indicator-size;
-    margin-top: -($custom-control-indicator-size * .25);
-    @include gradient-bg($custom-control-indicator-checked-bg);
-    border: 0;
-    border-radius: $custom-control-indicator-size;
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    margin-top: -($custom-range-thumb-width * .25); // Webkit specific?
+    @include gradient-bg($custom-range-thumb-bg);
+    border: $custom-range-thumb-border;
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
     appearance: none;
 
     &:focus {
       outline: none;
-      box-shadow: $custom-control-indicator-focus-box-shadow;
+      box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
     }
 
     &:active {
-      @include gradient-bg($custom-control-indicator-active-bg);
+      @include gradient-bg($custom-range-thumb-active-bg);
     }
   }
 
   &::-webkit-slider-runnable-track {
-    width: 100%;
-    height: $custom-control-indicator-size * .5;
-    color: transparent;
-    cursor: pointer;
-    background-color: $custom-control-indicator-bg;
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
+    color: transparent; // Why?
+    cursor: $custom-range-track-cursor;
+    background-color: $custom-range-track-bg;
     border-color: transparent;
-    border-radius: $custom-control-indicator-size;
+    @include border-radius($custom-range-track-border-radius);
+    @include box-shadow($custom-range-track-box-shadow);
   }
 
   &::-moz-range-thumb {
-    width: $custom-control-indicator-size;
-    height: $custom-control-indicator-size;
-    @include gradient-bg($custom-control-indicator-checked-bg);
-    border: 0;
-    border-radius: $custom-control-indicator-size;
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    @include gradient-bg($custom-range-thumb-bg);
+    border: $custom-range-thumb-border;
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
     appearance: none;
 
     &:focus {
       outline: none;
-      box-shadow: $custom-control-indicator-focus-box-shadow;
+      box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
     }
 
     &:active {
-      @include gradient-bg($custom-control-indicator-active-bg);
+      @include gradient-bg($custom-range-thumb-active-bg);
     }
   }
 
   &::-moz-range-track {
-    width: 100%;
-    height: $custom-control-indicator-size * .5;
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
     color: transparent;
-    cursor: pointer;
-    background-color: $custom-control-indicator-bg;
-    border-color: transparent;
-    border-radius: $custom-control-indicator-size;
+    cursor: $custom-range-track-cursor;
+    background-color: $custom-range-track-bg;
+    border-color: transparent; // Firefox specific?
+    @include border-radius($custom-range-track-border-radius);
+    @include box-shadow($custom-range-track-box-shadow);
   }
 
   &::-ms-thumb {
-    width: $custom-control-indicator-size;
-    height: $custom-control-indicator-size;
-    @include gradient-bg($custom-control-indicator-checked-bg);
-    border: 0;
-    border-radius: $custom-control-indicator-size;
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    @include gradient-bg($custom-range-thumb-bg);
+    border: $custom-range-thumb-border;
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
     appearance: none;
 
     &:focus {
       outline: none;
-      box-shadow: $custom-control-indicator-focus-box-shadow;
+      box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
     }
 
     &:active {
-      @include gradient-bg($custom-control-indicator-active-bg);
+      @include gradient-bg($custom-range-thumb-active-bg);
     }
   }
 
   &::-ms-track {
-    width: 100%;
-    height: $custom-control-indicator-size * .5;
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
     color: transparent;
-    cursor: pointer;
+    cursor: $custom-range-track-cursor;
     background-color: transparent;
     border-color: transparent;
-    border-width: ($custom-control-indicator-size * .5);
+    border-width: ($custom-range-thumb-height * .5);
+    @include box-shadow($custom-range-track-box-shadow);
   }
 
   &::-ms-fill-lower {
-    background-color: $custom-control-indicator-bg;
-    border-radius: $custom-control-indicator-size;
+    background-color: $custom-range-track-bg;
+    @include border-radius($custom-range-track-border-radius);
   }
 
   &::-ms-fill-upper {
-    margin-right: 15px;
-    background-color: $custom-control-indicator-bg;
-    border-radius: $custom-control-indicator-size;
+    margin-right: 15px; // arbitrary?
+    background-color: $custom-range-track-bg;
+    @include border-radius($custom-range-track-border-radius);
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2178e1f9cbac..8f60cbb5bc13 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -504,6 +504,22 @@ $custom-select-height-sm:           $input-height-sm !default;
 $custom-select-font-size-lg:        125% !default;
 $custom-select-height-lg:           $input-height-lg !default;
 
+$custom-range-track-width:          100% !default;
+$custom-range-track-height:         .5rem !default;
+$custom-range-track-cursor:         pointer !default;
+$custom-range-track-bg:             $gray-300 !default;
+$custom-range-track-border-radius:  1rem !default;
+$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
+
+$custom-range-thumb-width:            1rem !default;
+$custom-range-thumb-height:           $custom-range-thumb-width !default;
+$custom-range-thumb-bg:               $component-active-bg !default;
+$custom-range-thumb-border:           0 !default;
+$custom-range-thumb-border-radius:    1rem !default;
+$custom-range-thumb-box-shadow:       0 .1rem .25rem rgba($black, .1) !default;
+$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+$custom-range-thumb-active-bg:        lighten($component-active-bg, 35%) !default;
+
 $custom-file-height:                $input-height !default;
 $custom-file-focus-border-color:    $input-focus-border-color !default;
 $custom-file-focus-box-shadow:      $input-btn-focus-box-shadow !default;