Fix (form range): change colors for hover and active states

scss/_variables.scss

@@ -1159,8 +1159,12 @@ $form-range-thumb-border-radius: 50% !default;
 $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
 $form-range-thumb-focus-box-shadow: null !default;
 $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
-$form-range-thumb-active-bg: null !default;
-$form-range-thumb-active-border: $component-active-bg !default; // Boosted mod
+$form-range-thumb-hover-bg: $black !default; // Boosted mod
+$form-range-thumb-active-bg: $primary !default; // Boosted mod
+// fusv-disable
+$form-range-thumb-active-border: $component-active-bg !default; // Boosted mod / Deprecated in v5.2.2
+// fusv-enable
+$form-range-thumb-active-border-color: $primary !default; // Boosted mod
 $form-range-thumb-disabled-bg: $gray-500 !default;
 $form-range-thumb-transition: background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing, box-shadow $transition-duration $transition-timing !default;
 // scss-docs-end form-range-variables

scss/forms/_form-range.scss

@@ -16,14 +16,13 @@
  // Pseudo-elements must be split across multiple rulesets to have an effect.
  // No box-shadow() mixin for focus accessibility.
  &::-webkit-slider-thumb {
- border-color: $form-range-thumb-active-border;
+ border-color: $form-range-thumb-active-border-color;
  box-shadow: $form-range-thumb-focus-box-shadow;
  }
  &::-moz-range-thumb {
- border-color: $form-range-thumb-active-border;
+ border-color: $form-range-thumb-active-border-color;
  box-shadow: $form-range-thumb-focus-box-shadow;
  }
- // End mod
  }
 
  &::-moz-focus-outer {
@@ -43,8 +42,15 @@
  @include transition($form-range-thumb-transition);
  appearance: none;
 
+ // Boosted mod
+ &:hover {
+ @include gradient-bg($form-range-thumb-hover-bg);
+ }
+ // End mod
+
  &:active {
  cursor: grabbing; // Boosted mod
+ border-color: $form-range-thumb-active-border-color; // Boosted mod
  @include gradient-bg($form-range-thumb-active-bg);
  }
  }
@@ -71,8 +77,16 @@
  @include transition($form-range-thumb-transition);
  appearance: none;
 
+ // Boosted mod
+ &:hover {
+ border: $form-range-thumb-border;
+ @include gradient-bg($form-range-thumb-hover-bg);
+ }
+ // End mod
+
  &:active {
  cursor: grabbing; // Boosted mod
+ border-color: $form-range-thumb-active-border-color; // Boosted mod
  @include gradient-bg($form-range-thumb-active-bg);
  }
  }

site/content/docs/5.2/migration.md

@@ -49,6 +49,15 @@ If you need more details about the changes, please refer to the [v5.2.2 release]
 
 - `@mixin button-size()` has a new interface including a new optional parameter for button letter spacing.
 
+<!-- - <span class="badge bg-danger">Breaking</span> `$form-range-thumb-active-border` is now deprecated and will be removed in V5.3.0. It has been replaced by `$form-range-thumb-active-border-color`. -->
+
+- <details class="mb-2">
+ <summary><span class="badge bg-danger">Breaking</span> Sass variables:</summary>
+ <ul>
+ <li><code>$form-range-thumb-active-border</code> is now deprecated. It has been replaced by <code>$form-range-thumb-active-border-color</code> and will be removed in V5.3.0</li>
+ </ul>
+ </details>
+
 - <details class="mb-2">
  <summary><span class="badge bg-success">New</span> CSS variables:</summary>
  <ul>
@@ -63,6 +72,7 @@ If you need more details about the changes, please refer to the [v5.2.2 release]
  <li><code>$btn-letter-spacing-lg</code></li>
  <li><code>$btn-letter-spacing-sm</code></li>
  <li><code>$form-feedback-line-height</code></li>
+ <li><code>$form-range-thumb-active-border-color</code></li>
  </ul>
  </details>