[D9] Form API: Add a range widget option for number fields

[klonos]

This is similar to https://www.drupal.org/project/drupal/issues/2332833 and related to https://www.drupal.org/project/drupal/issues/2958499

Number inputs should allow the following widgets:

• number: text field with up/down buttons
• range: slider

We should allow the slider:

• to be rendered vertically
• to be "reversed"

This feature could be used:

• in contrib, for search facets (product prices for instance)
• in core, in certain situations like [UX] Date fields: The form element for setting granularity is odd and allows silly combinations. #4650 where using other form elements is not ideal

Additional information

• D8-only module, the uses the http://rangeslider.js.org library: https://www.drupal.org/project/range_slider
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
• http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html
• https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically
• https://caniuse.com/input-range shows support for every major browser, and 97%+ global usage/support
• https://caniuse.com/datalist shows average support across major browsers, and ~85% global usage/support. Once there's wider support, we could extend other Form API elements to support range/sliders.

[indigoxela]

@klonos why do you mention type="number" here? That's already in core for quite some time, only the documentation lags behind.

+1 from me for adding <input type="range"> to core. (Although I'm not sure if this type of input is the best solution for #4650)

[indigoxela]

OK, that's funny... the input type range is in core for years.

https://github.com/backdrop/backdrop/blob/f4178d3babf538caba254281a6e82a460c3163e9/core/includes/form.inc#L4527

But nobody knows because it's not documented.

[docwilmot]

OK, that's funny... the input type range is in core for years.

Really? I ported this for nothing? https://github.com/backdrop-contrib/range

[indigoxela]

I ported this for nothing?

I don't think so. The contrib module provides field types for the Field module, constructed from two textfields. This issue here is about form API and the range input type (<input type="range">).