Configuration for a timegrid
I have a React+Bootstrap app which displays a timeline of events, to which the user can add a grid, with vertical markers at regular intervals. The default interval is 1 second, so a vertical line is added to the timeline for every second of its duration. The timeline is toggled on and off with an icon button on a toolbar. However I want my users to be able to change the grid interval to any size they like - 1ms, 5 mins, 4 hours... whatever. Currently I implement this with a split dropdown: clicking the button area itself toggles the grid on with the defaults, but when the user clicks the arrow part the dropdown displays a number input, showing the current interval size, which they can use to set their own interval. I find this an unsatisfactory solution for a few of reasons:
- The user can alter the timegrid interval size even when the grid is not displayed, which seems wrong to me.
- A split button doesn't actually seem to be quite the right choice for this anyway, since this is really a matter of configuration, rather than 'alternatives to a main choice'.
- When the user makes such a choice it should immediately be applied, but with a number input this doesn't really work, as the user might want to click the input a few times to get their desired value. Then the only way to apply that value would seem to be with an 'OK' button on the dropdown.
Are there any other alternatives to this way of doing it? I considered a popup configuration dialog, but I want my users to be able to quickly change the value for the interval, without having another dialog to content with. I also thought about allowing the user to drag the grid lines to stretch the intervals, but this would not cater for arbitrary interval values (the user would always have to drag the lines to get to a particular value, which would be particularly problematic for a large change). I also don't want to add another control to the toolbar when the grid is toggled on, as the grid button is surrounded by other essential controls on either side, so such an extra control would have to shift the others along to the right.
This is an essential part of my application, one which users are likely to use a lot, so I want to get it right. I'm honestly a little stumped on how to solve this, however. Any suggestions/observations most welcome.
N.B: I also considered making the grid a permanent fixture, but the type of data displayed on the timeline (events in a musical score, measured in absolute time onsets) make that a less attractive option.