From: Mark Otto <markd.otto@gmail.com>
Date: Mon, 9 Jun 2025 12:18:42 +0000 (-0700)
Subject: Docs: add example of showing dynamic range value with output (#41516)
X-Git-Tag: v5.3.7~3
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=03f27a2b895eade538e91d812ba37d9e2bb2265d;p=thirdparty%2Fbootstrap.git

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 2ead074a9f..3f1b1349b7 100644
--- 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