需要可以指数增加的滑块（不使用范围）答案

【问题标题】：Need slider that can increment exponentially (not using range)需要可以指数增加的滑块（不使用范围）
【发布时间】：2010-10-15 14:44:28
【问题描述】：

目前我正在使用 jQuery UI 的滑块来允许人们选择捐赠金额。问题是，滑块太小，需要补偿最低 1 美元和最高 10,000 美元。建议的解决方案是使用一个小的增量，可能是 1 美元或 2 美元，价值在 1 美元到 1000 美元之间，然后从那里以指数方式将增量提高到 10,000 美元，但我找不到能够做到这一点的插件。

所以现在我的增量为 1 美元，正如您可能猜到的那样，几乎可以选择特定的金额。

任何帮助都会很棒！

【问题讨论】：

这样的滑块与可以输入金额的文本框相比有什么好处吗？作为用户，如果我可以输入滑块，我不会花时间摆弄滑块。
Logarithmic slider的可能重复
您可能还感兴趣：forum.jquery.com/topic/…
@Yi Jiang：我不相信“对数滑块”的答案真的能捕捉到整个画面。

标签： javascript jquery user-interface slider

【解决方案1】：

滑块几乎没有让我觉得适合这项工作。

但如果您坚持，您可以增加滑块步长（例如，10 个可能的位置），并为每一步查找它对应的数量。

例子：

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

【讨论】：

这听起来像是捐赠申请的正确映射。（而且它并不完全是指数级的，因此您需要使用某种查找表。）

【解决方案2】：

要添加到@brunodecarvalho 的答案，请创建一个带有刻度线但没有标签的JSlider，将其与JLabel 或JTextField 耦合，以便在更改滑块的值时，适当映射的值出现在JLabel 或JTextField。

如果您使用的是JTextField，请相信JTextField 中的值作为用户的实际捐赠金额（以便他可以编辑它并选择一个不在滑块上的值），并将滑块更新为JTextField 更改时适当关闭的刻度线。

【讨论】：

好的，所以我在 Java 类名中给出了这个答案，因为 java 标签，但现在我确信 java 标签是错误的。我不会删除答案，因为任何具有足够通用计算知识的人都应该能够将类名翻译成他们选择的语言/工具包。

【解决方案3】：

如前所述，您必须将滑块位置映射到金额。这是一个很好的几乎对数映射，它具有给出舍入值的好特性：

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

这会将整数范围 [0..64] 映射到范围 1 - 10,000。

【讨论】：