Display Range Value Dynamically as Slider Changes

[LucaLow]

Description

This PR addresses the concerns mentioned in: #41181

it improves the Range component documentation by demonstrating how developers can make their range sliders more accessible and user-friendly. A new example has been added, displaying the range value as text next to the “Example range” header.

This feature is already implemented in the Boosted Orange docs (Boosted Orange Range Usability).

Motivation & Context

This change enhances accessibility by helping developers present range values more clearly, improving usability for users who rely on visual or assistive cues.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-41196--twbs-bootstrap.netlify.app/docs/5.3/forms/range/#usability/

Related issues

Closes: #41181