Need slider that can increment exponentially (not using range)

Question

At the moment I am using jQuery UI's slider to allow people to select a donation amount. The problem is, the slider is to small and needs to compensate for the minimum of $1 and the maximum of $10,000. The proposed solution is to use a small increment, maybe $1 or $2, for values between $1 - $1000, and then from there, raising the increment exponentially all the way to $10,000, but I can't find a plugin capable of this.

So right now I have the increment at $1 and as you probably guessed, its nearly possible to select a specific money amount.

Any help would be great!

Answer 1

A slider hardly strikes me as the right tool for that job.

But if you insist, you could increase the slider step size (say, 10 possible positions) and for each step lookup the amount it corresponds to.

Example:

• 1 -> 1$
• 2 -> 2$
• 3 -> 5$
• 4 -> 10$
• 5 -> 50$
• 6 -> 200$
• 7 -> 1k$
• 8 -> 5k$
• 9 -> 10k$
• 10 -> 20k$

Answer 2

To add to @brunodecarvalho's answer, make a JSlider with tick marks but no labels, couple it with a JLabel or a JTextField so that when the slider's value is changed, the appropriately mapped value appears in the JLabel or JTextField.

If you're using a JTextField, trust the value in the JTextField as the user's actual donation amount (so that he can edit it and pick a value that's not on the slider), and update the slider to an appropriately close tick mark when the JTextField changes.

Answer 3

As has been said before, you will have to map the slider positions to money amounts. Here is a nice almost-logarithmic mapping that has the nice property of giving round values:

var slider_values = [];
var mantissas = [1, 1.2, 1.4, 1.6, 1.8, 2, 2.5, 3, 3.5, 4, 4.5, 5, 6, 7, 8, 9];
for (var base = 1; base < 10000; base *= 10) {
    for (var i = 0; i < mantissas.length; i++)
        slider_values.push(mantissas[i] * base);
}
slider_values.push(10000);

This maps the integer range [0..64] to the range 1 - 10,000.