Number Property MIN & MAX

Elements Component Development
1

I’m trying to use a number property in a custom component and have set MIN and MAX values for the field, but it does not respect these settings. The clicker will allow you to go below the MIN or above the MAX.

Is this a known problem?

Seems like this would have been fixed long ago if it were. Maybe I’m doing something wrong.

Here is the property code.

{
                    "title": "Blur",
                    "id": "backdropBlur",
                    "responsive": false,
                    "format": "backdrop-blur-[{{value}}px]",
                    "number": {
                        "default": 0,
                        "min": 0,
                        "max": 10
                    }
                }
2

Sorry, that’s not actually supported (yet), I think the main reason being we’ve not found a use for it in one of our components, and no one has asked for it… I’ll get it added to the list!

You could use a slider with ticks instead.this would give you a number limit :slight_smile:

CleanShot 2025-10-08 at 10 .09.31@2x
CleanShot 2025-10-08 at 10 .09.31@2x734×502 44.4 KB

3

@dan I don’t understand because it appears you are already using this in some of your properties, for instance, for a BLUR value, unless you are doing something different.

I can switch to using a slider, but my primary motivation was to replicate what you were doing, making it more familiar to users.

Or did you mean a use case for the MIN/MAX as opposed to a number field in general?

I see that where you are using number fields, they exhibit the same problem, where they will accept negative numbers even though they may not make sense for the value. I think MIN/MAX clamping is essential.

4

Exactly! Your question was about Min/Max… so yes we’re using the number stepper, but no we don’t have the min/max hooked up yet.

It’s on the list to fix up :slight_smile:

5

And rounding true / false please :folded_hands:

1 Like