I am making a simplistic in-browser IDE for some very domain-specific coding. Because I like Bret Victor’s thoughts on Learnable Programming so much I thought I’d throw in some draggable numbers ala Tangle.js (click here to see what I’m talking about).
My implementation is a much simpler slider input control but the idea is the same. One issue comes up however. The dragging slider needs values for min, max, and step. Since the values are user-entered I cannot hard code them. Currently I do {min: currentValue/10, max: currentValue*5} but this is so simplistic that it fails to make sense in a large class of cases.
What I would like is an algorithm (which I imagine would be just a simple calculation) that given a value for a number would make good guesses on min, max, and step values. (Or any 2 of those since getting the third would be trivial).
eg.
fn(15) -> {min: 0, max: 35, step: 1}
fn(1.478) -> {min: -2, max: 5, step: .2}
fn(-7034) -> {min: -35000, max: -500, step: 100}
Obviously it need not and cannot be perfect but I’m wondering if anyone has an idea for an algorithm or something mathy that makes sense here.
I might try something like:
stepSize = abs(currentValue/numSteps);
offset = numSteps * stepSize / 2;
minValue = currentValue – offset;
maxValue = currentValue + offset;
Where you get to pick how many steps (your precision) that you want for the increment size of your progress bar.
4
I can think of a few things you could try. You’re going to have to experiment though – what works best in most situations is going to largely be based on how it feels to use:
- Use your current formula, but tweak those constants.
- Base the step size on the number of digits in the current/previous value, rather than the actual value. I imagine this might be a little more intuitive for users.
- If you aren’t already, you might want to try dynamically updating your min/max/step values based on the current value, rather than the previous value.
- If your step size doesn’t have to be constant, try increasing it based on the difference between the current value and the previous value.
- You might be able to get some use out of Benford’s Law: use a smaller step size if the first digit of the current/previous value lower. Basically you could try using a smaller range & step size if the first digit is lower. This might be confusing for users though!
…Where by current value I mean the currently-selected value. By previous value I mean the value as it was when the user started manipulating it (i.e. clicked on it in the Tangle.js example).