Add value indicators for Bootstrap range input

[richchw]

Background Info & references:

This pitch is related to the following:

• Adminterface Range Input
• Bootstrap 5.0 range input

Problem:

The existing range input for Bootstrap 5.0 is lacking the feature to view the value of the selected range before submitting the form. This makes it hard for users to select the right value even when there are hints as to what the max & min values are.

The range input will become less practical and unusable in many scenarios without any visible indicators when it's used in a large range, i.e. when setting a min of 1 and max of any numbers greater than 20.

Proposed Solution:

The following solution samples are from Value Bubbles for Range Inputs

Value indicator on the right

Value indicator as a tooltip

Both value indicators will solve the issue by displaying the values of the currently selected range value. However, the tooltip version will be more practical considering that the range input will be squished on mobile view.

We can add the JS and CSS to the range input for Adminterface based on this original example.

No-gos:

• Do not need to custom style the tooltip, we can use Bootstrap's default styling for consistency.