root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Merge e1509592e7 into 99a0dc628a

This commit is contained in:
Luca Lowndes 2025-04-11 17:13:25 +10:00 committed by GitHub
parent 99a0dc628a e1509592e7
commit d782fc215e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
site/content/docs/5.3/forms/range.md
View File

@ -42,6 +42,32 @@ 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 improved usability, it is recommended most of the time to display the current selected value in text form
{{< 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>
function updateLabelValue() {
document.querySelector(`output[for="${this.id}"]`).innerHTML = "Value: " + this.value;
}
window.addEventListener('load', function () {
Array.from(document.getElementsByClassName('form-range')).forEach(function (element) {
if (document.querySelector(`output[for="${element.id}"]`)) {
element.addEventListener('input', updateLabelValue)
updateLabelValue.call(element)
}
})
})
</script>
{{< /example >}}
## CSS
### Sass variables