Custom input range disabled styling (#26540)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 8348e261c581d1279b3694eaa39a7a06e7ab1441..5e1fa1992785187a8bbc780669ec667cd9316e64 100644 (file)
--- 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 0aa549447a611117f79c223660cfa224f6b4a1db..525f9be446bfc99d551393695b95cbfeb7d93c72 100644 (file)
--- 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;