.

Orange-OpenSource · Apr 4, 2023 · e4e9393 · e4e9393
1 parent d6ab0b0
commit e4e9393
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 17 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1268,7 +1268,7 @@ $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; // Boosted mod
 $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
-$form-range-thumb-hover-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod
+$form-range-thumb-hover-bg: $black !default; // Boosted mod
 $form-range-thumb-active-bg: $primary !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)`
 $form-range-thumb-active-border: $primary !default; // Boosted mod
 $form-range-thumb-disabled-bg: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`

diff --git a/site/content/docs/5.3/forms/range.md b/site/content/docs/5.3/forms/range.md
@@ -32,31 +32,22 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara
 <input type="range" class="form-range" id="disabledRange" disabled>
 {{< /example >}}
 
-## Dark variant
-
-Nothing to do here, just use it normally within a `.bg-dark` element.
-
-{{< example class="bg-dark" >}}
-<label for="customRange2" class="form-label">Example range</label>
-<input type="range" class="form-range" id="customRange2">
-{{< /example >}}
-
 ## Min and max
 
 Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
 
 {{< example >}}
-<label for="customRange3" class="form-label">Example range</label>
-<input type="range" class="form-range" min="0" max="5" id="customRange3">
+<label for="customRange2" class="form-label">Example range</label>
+<input type="range" class="form-range" min="0" max="5" id="customRange2">
 {{< /example >}}
 
 ## Steps
 
 By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.
 
 {{< example >}}
-<label for="customRange4" class="form-label">Example range</label>
-<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange4">
+<label for="customRange3" class="form-label">Example range</label>
+<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
 {{< /example >}}
 
 ## Usability
@@ -67,10 +58,10 @@ This requires extra JavaScript code.
 
 {{< example >}}
 <div class="d-flex w-100 justify-content-between">
- <label for="customRange5" class="form-label">Example range</label>
- <output for="customRange5" class="fw-bold" aria-hidden="true"></output>
+ <label for="customRange4" class="form-label">Example range</label>
+ <output for="customRange4" class="fw-bold" aria-hidden="true"></output>
 </div>
-<input type="range" class="form-range" min="0" max="100" step="1" id="customRange5">
+<input type="range" class="form-range" min="0" max="100" step="1" id="customRange4">
 
 <script>
  // Please note that this script is only an example, please adapt it to your needs