From 03f27a2b895eade538e91d812ba37d9e2bb2265d Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Mon, 9 Jun 2025 05:18:42 -0700
Subject: [PATCH] Docs: add example of showing dynamic range value with output
 (#41516)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <juderamond@gmail.com>
---
 site/src/content/docs/forms/range.mdx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

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