Improve and rework 'range' element.

The displayed output of the 'range' element was not easily customizable because it was rendered using JavaScript. The displayed output could only be positioned to the right of the range input.

Summary

• Output can now be positioned to the left, right, above, or below the range element.
• Output related element properties were renamed.
• Output element properties now conform to sub element standard. For example, all #output__PROPERTY_NAME will automatically be added to the output element.
• Output number element now supports customizable attributes (i.e. class, style, and attributes)
• Output number element's width automatically resized to the max value's length.
• Default range properties are always defined (#min: 0, #max: 100, and #step: 1)
• CSS (css/webform.element.range.css) and JS (js/webform.element.range.js) were update.

Before

range:
  '#type': range
  '#title': Range
  '#range__output': true
  '#range__output_prefix': '$'
  '#range__output_suffix': '.00'

After

range:
  '#type': range
  '#title': Range
  '#output': right
  '#output__field_prefix': '$'
  '#output__field_suffix': '.00'
  '#output__attributes':
    style: 'background-color: yellow'

Screenshot