1berry/bootstrap
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Julien Déramond <juderamond@gmail.com>
This commit is contained in:
Mark Otto 2025-06-09 05:18:42 -07:00 committed by GitHub
parent f04b980e74
commit 03f27a2b89
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
site/src/content/docs/forms/range.mdx
View File

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