From ed2d40d834148ee4b7965c800eca3dcd6baa5753 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Sat, 19 May 2018 18:30:30 +0200
Subject: [PATCH] Custom input range disabled styling

---
 scss/_custom-forms.scss | 22 ++++++++++++++++++++++
 scss/_variables.scss    |  1 +
 2 files changed, 23 insertions(+)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index cd75d8b4472e..c210737afb14 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -418,4 +418,26 @@
     background-color: $custom-range-track-bg;
     @include border-radius($custom-range-track-border-radius);
   }
+
+  &:disabled {
+    &::-webkit-slider-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+
+    &::-webkit-slider-runnable-track {
+      cursor: default;
+    }
+
+    &::-moz-range-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+
+    &::-moz-range-track {
+      cursor: default;
+    }
+
+    &::-ms-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+  }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 73451a090829..f034bbc05109 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -524,6 +524,7 @@ $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-range-thumb-disabled-bg:      $gray-500 !default;
 
 $custom-file-height:                $input-height !default;
 $custom-file-height-inner:          $input-height-inner !default;