Extending a Widget for numeric fields.

Looking for a HTML range field in Drupal 8 core I did not found one. First I tried to alter Number Widget but that was wrong. Just extend a suitable widget. The code is very short. But the display is not as good as one needs. Where is the min and max value? And the current value? The specs @ w3c html5 forms input range has some user agent rendering which does not give min, max or current value hints.

number field.

range field.

with datalist trying to add ticks and labels.

Checkout the difference between your browsers and platforms.

Please help with https://www.drupal.org/node/2332833 to add min,max and current value while editing.

<?php
/**
 * @file
 * Contains \Drupal\Core\Field\Plugin\Field\FieldWidget\NumberWidget.
 */

namespace Drupal\Core\Field\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;

/**
 * Plugin implementation of the 'number' widget.
 *
 * @FieldWidget(
 *   id = "number_range",
 *   label = @Translation("Range field"),
 *   field_types = {
 *     "integer",
 *     "decimal",
 *     "float"
 *   }
 * )
 */
class NumberRangeWidget extends NumberWidget {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $element_array = parent::formElement($items, $delta, $element, $form, $form_state);

    $element_array['value']['#type'] = 'range';

    return $element_array;
  }

}