Improve the FormAPI range element UX

Problem/Motivation

In #1174646: Add new HTML5 FAPI element: range → we introduced the Range form element, with a minimal set of properties: #min, #max and #step inherited from the Number element.

The problem is visual: when that widget is rendered, it does not display the min, the max and - more importantly - the current value, forcing users to guess what they are settings without visual guidance.

Original use case is in ✨ On the API server configuration, add readable values on the range widget Active .

Steps to reproduce

Create a form with a '#type' => 'range' element. Observe its rendering. Change the value. What is the value after moving the scale ?

Proposed resolution

• Add new #showMin boolean property, defaulting to false
• Add new #showMax boolean property, defaulting to false
• Add new #showCurrent boolean property, defaulting to false
• If #showMin, prepend the min value before the range widget
• If #showMax, append the max value after the range widget
• Create a CSS+JS library that will automatically display the current value above or below the widget, at the position of the current value
• If #showCurrent, attach that library to the page and bind it to the element
• Add change record

Remaining tasks

Confirm design, implement.

User interface changes

Up to three new values on range widgets.

API changes

None.

Data model changes

None.

Release notes snippet

TBD.