Docs: add example of showing dynamic range value with output (#41516)

Co-authored-by: Julien Déramond <juderamond@gmail.com>

diff --git a/site/src/content/docs/forms/range.mdx b/site/src/content/docs/forms/range.mdx
index 2ead074a9f89a9ec799af7e508415d41d3e1fb9d..3f1b1349b7336bc02bac2f5b2f40a46a2bd0ba95 100644 (file)
--- a/site/src/content/docs/forms/range.mdx
+++ b/site/src/content/docs/forms/range.mdx
@@ -32,6 +32,27 @@ By default, range inputs “snap” to integer values. To change this, you can s
 <Example code={`<label for="customRange3" class="form-label">Example range</label>
 <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">`} />
 
+## Output value
+
+The value of the range input can be shown using the `output` element and a bit of JavaScript.
+
+<Example code={`<label for="customRange4" class="form-label">Example range</label>
+  <input type="range" class="form-range" min="0" max="100" value="50" id="customRange4">
+  <output for="customRange4" id="rangeValue" aria-hidden="true"></output>
+
+  <script>
+    // This is an example script, please modify as needed
+    const rangeInput = document.getElementById('customRange4');
+    const rangeOutput = document.getElementById('rangeValue');
+
+    // Set initial value
+    rangeOutput.textContent = rangeInput.value;
+
+    rangeInput.addEventListener('input', function() {
+      rangeOutput.textContent = this.value;
+    });
+  </script>`} />
+
 ## CSS
 
 ### Sass variables