Custom input range disabled styling (#26540)

2 files changed, 23 insertions, 0 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 8348e261c..5e1fa1992 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -424,6 +424,28 @@
     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;
+    }
+  }
 }
 
 .custom-control-label::before,
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0aa549447..525f9be44 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -548,6 +548,7 @@ $custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !de
 $custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
 $custom-range-thumb-focus-box-shadow-width:  $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge
 $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;