From ff5a7cabd3574b074380c80ed3816834aa6eea7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Thu, 23 Mar 2023 10:09:33 +0100
Subject: [PATCH] feat(range): provide an accessible example to display the
 value (#1714)

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
---
 site/content/docs/5.3/forms/range.md | 31 ++++++++++++++++++++++++++++
 site/content/docs/5.3/migration.md   |  2 ++
 2 files changed, 33 insertions(+)

diff --git a/site/content/docs/5.3/forms/range.md b/site/content/docs/5.3/forms/range.md
index 8c4233c4b7..58dea91019 100644
--- a/site/content/docs/5.3/forms/range.md
+++ b/site/content/docs/5.3/forms/range.md
@@ -50,6 +50,37 @@ By default, range inputs "snap" to integer values. To change this, you can speci
 <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
 {{< /example >}}
 
+## Usability
+
+For better usability, it is recommended most of the time to display the current selected value.
+
+This requires extra JavaScript code.
+
+{{< example >}}
+<div class="d-flex w-100 justify-content-between">
+  <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="customRange4">
+
+<script>
+  // Please note that this script is only an example, please adapt it to your needs
+
+  function updateLabelValue() {
+    document.querySelector(`output[for="${this.id}"]`).innerHTML = this.value;
+  }
+
+  window.addEventListener('load', function () {
+    Array.from(document.getElementsByClassName('form-range')).forEach(function (el) {
+      if (document.querySelector(`output[for="${el.id}"]`)) {
+        el.addEventListener('input', updateLabelValue)
+        updateLabelValue.call(el)
+      }
+    })
+  })
+</script>
+{{< /example >}}
+
 ## CSS
 
 ### Sass variables
diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
index 42b1f50427..53aa1a89ec 100644
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -145,6 +145,8 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
 
 - Form validation `border-color` and text `color` states now respond to dark mode, thanks to new Sass and CSS variables.
 
+- <span class="badge bg-success">New</span> Our range documentation now provides an example which displays the current selected value for better usability, but with some extra JavaScript code.
+
 ### Helpers and utilities
 
 - <span class="badge bg-success">New</span> `.border-{color}-subtle`.