I have a requirement to create "brackets" for permissions based off the amount of a transaction. For example, a user assigned to the $10-100 bracket should have permission to modify all transactions between $10.00 and $100.00.
What interface options are available that would allow me to define multiple brackets without any of the brackets overlapping? For instance, if there is a $10-100 bracket, there cannot be another bracket with a range of $50-$200.
As of now, I'm leaning toward showing a single form when editing/creating a bracket with text inputs for Minimum Amount and Maximum Amount, then using jQuery to check whether the range of those values overlaps with any existing brackets and displaying a context alert onChange ("The inputted range overlaps with an existing permission bracket"). However, I'm not sure if that's the best way of inputting these ranges or communicating the mutual exclusivity.
Ideally, there would be a number line that shows existing ranges and lets you create or modify ranges by dragging/highlighting. However, I couldn't find any existing libraries that have this functionality.
The only requirement is that the brackets cannot overlap.
Any ideas for best implementing this interface? Thanks! Any ideas are appreciated :) I can clarify the requirements if necessary.