From e4e93933cad7bfa39d516e1773ce555267145da4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Tue, 4 Apr 2023 10:26:39 +0200
Subject: [PATCH] .

---
 scss/_variables.scss                 |  2 +-
 site/content/docs/5.3/forms/range.md | 23 +++++++----------------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 85b4a9c740..f0df2c662b 100644
--- 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
index b8aa204152..58dea91019 100644
--- a/site/content/docs/5.3/forms/range.md
+++ b/site/content/docs/5.3/forms/range.md
@@ -32,22 +32,13 @@ 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
@@ -55,8 +46,8 @@ Range inputs have implicit values for `min` and `max`—`0` and `100`, respectiv
 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