Enhanced range editor for Neos CMS

This editor has some more features as the one who is already in the core:

• Minimal and maximal are clickable
• It's possible to hide the input via showInput: false
• The text input has a nicer UX, specially if a unit is set
• You can set a own text for every value
• The input field is debounced, so it is finally possible to set the value with the keypad
• Handle arrows keys (up/down) (with modifier keys for bigger steps) to increase or decrease the value via keyboard
• Ratio mode
• Shows reset button of resetValue is set

Example:

'Foo.Bar:Element':
  properties:
    zoomLevel:
      type: integer
      ui:
        inspector:
          editor: 'Carbon.RangeEditor/Editor'
          editorOptions:
            showMinLabel: true
            showMaxLabel: true
            minLabel: null
            maxLabel: null
            showInput: true
            # If set, it will show a reset button
            resetValue: 4
            # Sets a custom icon for the reset button, defaults to 'times'
            resetIcon: 'undo'
            # Set custom label to reset button, defaults to 'Carbon.RangeEditor:Main:reset'. The value and unit is also passed to the translation function
            # If the reset value has a label, the label is passed
            resetLabel: 'Reset back to {value}{unit}'
            min: 1
            max: 6
            step: 1
            unit: ''
            valueLabels:
              1: Globe
              2: Coninent
              3: Country
              4: Area
              5: City
              6: Street

Of course you can localize a value. e.g. Vendor.Package:Folder.Filename:1 If you have set a value label for the min or max value, you don't need to set minLabel of maxLabel.

If you work with xlf files, you can also ad a setting called valueLabelsFile:

'Foo.Bar:Element':
  properties:
    zoomLevel:
      type: integer
      ui:
        inspector:
          editor: 'Carbon.RangeEditor/Editor'
          editorOptions:
            minLabel: null
            maxLabel: null
            min: 1
            max: 6
            step: 1
            unit: ''
            valueLabelsFile: 'Foo.Bar:ZoomLevel'
            valueLabels:
              2: 'Override label from Foo.Bar:ZoomLevel:2'

In that case, the plugin search for the translation value in the file ZoomLevel.xlf in the package Foo.Bar. Example: For the value 5 the translation string will be Foo.Bar:ZoomLevel:5.

Ratio mode

If the unit i set to %, the min value 0 or bigger, the max value 100 or smaller and ratio is set to true, it will show the ratio of the two values. For example, if the value is set to 30, the left value will show 30% and the right value will show 70%.

'Foo.Bar:Element':
  properties:
    ratio:
      type: integer
      ui:
        inspector:
          editor: 'Carbon.RangeEditor/Editor'
          editorOptions:
            ratio: true
            min: 25
            max: 75
            step: 5