How Do I Pass A Schema Value With Units From Apostrophe 3?

Question

I want to give the user the ability to customize border-radius on my component (widget) in ApostropheCMS.

I have written the following schema for the same:

borderRadiusValue: {
          label: 'Border Radius value',
          type: 'range',
          unit: 'px',
          min: 0,
          max: 50,
          step: 1,
          def: 0,
          if: {
            havingBorderRadius: true
          }
        },

I want to apply the value from borderRadiusValue as inline style in my html so that the it looks something like this style = "border-radius: {{widget.borderRadiusValue}} 0 0 {{widget.borderRadiusValue}}

However, for borderRadiusValue as 50px, I only get style applied as style = "border-radius: 50 0 0 50. Instead, I want it to be style = "border-radius: 50px 0 0 50px. Does ApostropheCMS have this feature? How do I go about implementing this?

Here is a link to range fields in A3

Answer 1

range fields have a numeric value, without units. So the simplest way to do what you want is:

style = "
  border-radius:
    {{widget.borderRadiusValue}}px
    0
    0
    {{widget.borderRadiusValue}}px
"

Note the "px" after emitting each number.