Settings Schema: Range input only supports integers?

[indextwo]

I'm brand-new to Shopify, but a well-versed e-commerce developer, so most of my initial questions are coming from a place of trying to figure this out as I go:

I'm developing a store based on a premium theme the client wants to start with. As I was tweaking it, I noticed that all the font sizes were defined in px. I'm updating these all to use em/rem units, but in updating the settings_schema.json file, Shopify threw the following error:

Section 3: setting with id="font_size_base_int" min must have 1 or less decimal digits

The section it's referring to is defined like this:

{
"type": "range",
"id": "font_size_base_int",
"min": 0.75,
"max": 2,
"step": 0.125,
"unit": "rem",
"label": "Font size",
"default": 1
},

Assuming a default base size of 16px, that's a minimum of 12px to a max of 32px, with a step of 2px between. I know for a fact this works, as a range-type input will accept any floating-point number.

I found this thread (from 5 years ago) where the answer quotes from the docs saying "The default, min, max step values must be numbers. The numbers can be integers or floats." - however the current docs make no reference to range values being integers or floats.

I don't want to be stuck using integers or, assuming it means only a single decimal point, values like 1.1, because with a base size of 16px, 1.1rem translates to 17.6px, which is just icky.

Is there a way for Shopify to accept my range inputs as floats, or will I have to change all of my inputs to number types?

[gina-gregory · Accepted solution]

You can make your range setting to use whole integers and then use liquid math (divided_by) to get the precision you need.

[indextwo]

Thanks - that's actually what I ended up doing - leaving it as `px` and adding ` | divided_by: 16` to my Liquid CSS file.

Just confusing/irksome as to why Shopify rejects values that are valid 🤷🏻‍♀️