Find a way to visually represent CSS variables of multiple values as singe-value

[yairEO]

For example, padding/margin values may look like: 10px 20px, and a variable that controls that maybe be defined as so:

--gap: 10px 20px;

Currently Knobs' range slider cannot deal with a variable that may consists of more than one "value".

It is desired to have more control over such variables, if the situation demands, and the visual way to represent such a solution should be carefully considered, along with the appropriate Knobs (settings) data structure.

I prefer to avoid text inputs because they do not provide the desired experience of gradual change, as sliders do.