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

@@ -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

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`.