From 7b1cfcf863e1f905ff8540519cbf13385d1582d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Fri, 16 Dec 2022 12:30:23 +0100
Subject: [PATCH] feat(range): provide an example to display the value

---
 site/content/docs/5.2/forms/range.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/site/content/docs/5.2/forms/range.md b/site/content/docs/5.2/forms/range.md
index 81eeae4b4b..0fe7798c32 100644
--- a/site/content/docs/5.2/forms/range.md
+++ b/site/content/docs/5.2/forms/range.md
@@ -50,6 +50,28 @@ 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>
+  <label id="customRange4ValueLabel" for="customRange4" class="form-label"></label>
+</div>
+<input type="range" class="form-range" min="0" max="100" step="1" id="customRange4" onchange="updateLabelValue()">
+
+<script>
+  function updateLabelValue() {
+    document.getElementById('customRange4ValueLabel').innerHTML = document.getElementById('customRange4').value;
+  }
+
+  updateLabelValue()
+</script>
+{{< /example >}}
+
 ## Sass
 
 ### Variables