Gutenberg: Have problem with changing padding sizes from px to % in block

[NasKadir123]

Hello! I have some problems with padding.
I created a new Gutenberg block and have one div with class and did something like that:

registerBlockType(...{
...
attributes: {
   paddingTop: {
                 type: 'number',
                 default: 20         
                          },
}

edit: ( props ) => { ...
    <Fragment>
            <div className={ classnames( 'main-container-flex' ) } 
        style={{ paddingTop: paddingTop}}></div>

            <InspectorControls>
                    <RangeControl
                value={ paddingTop }
                onChange= ( value ) => {
                    setAttributes( { paddingTop: value } )
                min={ -200 }
                max={ 200 }
                allowReset
                    />
        </InspectorControls>
        </Fragment>
        );
    },
    save: ( props ) => { ....
                <div className={ classnames( 'main-container-flex' ) } 
                style={{ paddingTop: paddingTop}}></div>
        );
    },
} );

And it works fine, but I also want to add % to padding, not only px.
So I added Button group to InspectorControl:

<ButtonGroup>
<Button isSmall isPrimary  onClick={ () => setAttributes( { paddingTop: (paddingTop) + "px" } ) }>{ "px" }</Button>
<Button isSmall isPrimary  onClick={ () => setAttributes( { paddingTop: (paddingTop) + "%" } ) }>{ "%" }</Button>
</ButtonGroup>

And have errors when click on button and trying to change number: The specified value "64%" is not a valid number.

I'm sure that it's not right to write like this: setAttributes( { paddingTop: (paddingTop) + "%" } ), but if I wrote in div style={ paddingTop: (paddingTop) + "%" } it will work.
But I won't have ability to switch between 'px' and '%'.
Sorry for my English and not smart question, but I'm actually newbie in web development.
If you have question do not hesitate to ask, thanks!

[Soean]

paddingTop: {
   type: 'number',
   default: 20
}

You defined paddingTop as number, but 64% is a string, not a number. Try to change the type to string.

[NasKadir123]

paddingTop: {
   type: 'number',
   default: 20
}

You defined paddingTop as number, but 64% is a string, not a number. Try to change the type to string.

I've tried before, but the same error appeared.

[Soean]

Ah, of course, the value in RangeControl needs to be a number. So the solution should be two attributes. One for the padding (type: number) example: 64 and one for the unit (type: string) example: % or px.

[NasKadir123]

Ah, of course, the value in RangeControl needs to be a number. So the solution should be two attributes. One for the padding (type: number) example: 64 and one for the unit (type: string) example: % or px.

Thanks a lot!!!!!!!
It's working!