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.

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.

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.