Display Range Value Dynamically as Slider Changes

[MohamadSalman11]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

It would be great if Bootstrap’s range input could show the selected value in real-time while the user moves the slider

StackBlitz Example: Range slider with a dynamic value display
(Of course, the design can vary, but this is just an example of the concept.)

Documentation: Bootstrap Range Input Documentation

Motivation and context

Improves user experience by providing real-time feedback

[julien-deramond]

I'm including this in case the feature is ever added to the official documentation or library. We included it in the Boosted Range documentation (Orange's fork of Bootstrap) a while ago within a dedicated 'Usability' section. It could maybe interesting to do in Bootstrap doc too.

[Zhl1921]

Hi @MohamadSalman11 , I tested the live range slider demo locally (fork → npm ci → npm run docs:serve → visit /docs/forms/range) and noticed that at the maximum value the value bubble sometimes extends beyond the track, so you could clamp the calculated percentage to [0%, 100%] via something like const offset = Math.min(Math.max(((val - el.min)/(el.max - el.min))*100, 0), 100); bubble.style.left = \calc(${offset}% - ${bubble.offsetWidth/2}px); to keep it perfectly aligned—let me know if you’d like me to open a PR with this adjustment.

[MohamadSalman11]

Hi @MohamadSalman11 , I tested the live range slider demo locally (fork → npm ci → npm run docs:serve → visit /docs/forms/range) and noticed that at the maximum value the value bubble sometimes extends beyond the track, so you could clamp the calculated percentage to [0%, 100%] via something like const offset = Math.min(Math.max(((val - el.min)/(el.max - el.min))*100, 0), 100); bubble.style.left = \calc(${offset}% - ${bubble.offsetWidth/2}px); to keep it perfectly aligned—let me know if you’d like me to open a PR with this adjustment.

Feel free to open a pull request.