removed input focus box-shadow & fixed custom-range active/focus style

build/scss/_bootstrap-variables.scss

@@ -360,11 +360,11 @@ $btn-line-height-lg:          $input-btn-line-height-lg !default;
 $btn-border-width:            $input-btn-border-width !default;
 
 $btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              0 1px 1px rgba($black, .075) !default;
-$btn-focus-width:             $input-btn-focus-width !default;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
+$btn-box-shadow:              none !default;
+$btn-focus-width:             0 !default;
+$btn-focus-box-shadow:        none !default;
 $btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
+$btn-active-box-shadow:       none !default;
 
 $btn-link-disabled-color:     $gray-600 !default;
 
@@ -407,8 +407,8 @@ $input-border-radius-sm:                $border-radius-sm !default;
 $input-focus-bg:                        $input-bg !default;
 $input-focus-border-color:              lighten($component-active-bg, 25%) !default;
 $input-focus-color:                     $input-color !default;
-$input-focus-width:                     $input-btn-focus-width !default;
-$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
+$input-focus-width:                     0 !default;
+$input-focus-box-shadow:                none !default;
 
 $input-placeholder-color:               $gray-600 !default;
 
@@ -517,6 +517,8 @@ $custom-file-text: (
         en: "Browse"
 ) !default;
 
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+
 
 // Form validation
 $form-feedback-margin-top:          $form-text-margin-top !default;

build/scss/_mixins.scss

@@ -349,17 +349,43 @@
 @mixin custom-range-variant($name, $color) {
   &.custom-range-#{$name} {
     &:focus {
-      &::-webkit-slider-thumb,
-      &::-moz-range-thumb,
-      &::-ms-thumb {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
+      }
+
+      &::-moz-range-thumb     {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
+      }
+
+      &::-ms-thumb            {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
+      }
+    }
+
+    &::-webkit-slider-thumb {
+      background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
+    }
+
+    &::-moz-range-thumb {
+      background-color: $color;
+
+      &:active {
         background-color: lighten($color, 35%);
       }
     }
 
-    &::-webkit-slider-thumb,
-    &::-moz-range-thumb,
     &::-ms-thumb {
       background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
     }
   }
 }