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).


   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.

2 Answers 2


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.

  • Isn't this identical to just {min: current/2, max: current*2} with min/max inversed if the value is negative? Commented Feb 13, 2013 at 16:33
  • No for the overall formula, yes for offset = current/2. But if I used current/2 then I thought it would require a wordy explanation. As for the overall formula, If numSteps = 10, curValue=15; the above would result in 7.5, and 22.5. Your formula would be {7.5, 30.0}. I don't claim the above is THE formula to use, but with some tweaking (ie. skewing/scaling in directions applicable to the users domain) it certainly can be an effective starting point.
    – Dunk
    Commented Feb 13, 2013 at 18:51
  • You're going to need some special handling for when currentValue == 0 Commented Feb 14, 2013 at 9:32
  • @Baquet : Good catch. Probably just need to have a minimum value for offset.
    – Dunk
    Commented Feb 14, 2013 at 14:39

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.