A UI primitive for entering a value and its ambiguity at the same time
Traditional UIs force users to enter a single precise value, but what people really mean is "around 2pm" or "about $500".
circa-input captures that ambiguity as data.
Click to set a value, then drag up/down to adjust the margin (tolerance).
The margin expands symmetrically.
Not yet operated
With the asymmetric attribute, you can adjust the lower and upper margins independently.
Example: "30 minutes before 2pm is OK, but up to 2 hours after is fine."
Not yet operated
The gradient attribute adds a visual confidence gradient to the margin area.
relative fades from center outward, absolute maps opacity to the full range.
Not yet operated
Not yet operated
The range-only attribute hides the center value handle and shows only the range bar.
Useful when the user wants to specify a range rather than a point with tolerance.
Not yet operated
Not yet operated
circa-input can be used in various scenarios to input approximate values.
Specify your preferred delivery time window
Enter an approximate budget
Comfortable temperature range
Specify the target age group
Estimate how long the meeting will take
Your commute distance range
Dynamically change attributes to experiment with circa-input behavior.
Not yet operated
With a name attribute, CircaValue is included as a JSON string in the <form>'s FormData.
The required attribute enables validation.
Submit the form to see results