jQuery Slider Bar - 尝试根据用户输入设置范围和间隔

Posted 2023-03-13

【中文标题】jQuery Slider Bar - 尝试根据用户输入设置范围和间隔

【英文标题】：jQuery Slider Bar -- trying to setup range and intervals based on user input

【发布时间】：2015-04-16 15:01:30

【问题描述】：

这个想法是有人会输入他们的医疗账单金额，在取消折扣后，用户现在有一个新的要支付的金额。然后，用户可以选择他们希望每月支付多少，直到全额支付。

我想创建一个带有可选刻度的 jQuery 滑块，以分解每月付款的选择。例如，如果有人输入他们的医疗账单为 1000 美元，折扣 20% 后将变为 800 美元，然后我希望将 800 在滑块上分为 12 个刻度，每个值除以月数。第一个刻度是一个月 800 美元，而最后一个刻度大约是 800 美元。 12 个月 66 美元。

我尝试查看 jQuery 滑块文档，但不确定如何根据用户输入聚合范围值。到目前为止，我有用于用户输入的 javascript 代码，但我不确定如何将它与滑块合并。

我们将不胜感激任何正确方向的帮助。谢谢！

// Have the user input their medical bill amount
var originalAmount = prompt('What is the amount of your medical bill?');
console.log(originalAmount);

// Take off 20% of the medical bill for a discount
var discountAmount = originalAmount * .20;
console.log('Your discount is 20%, which is ' + discountAmount + ' in savings.');

// Declare what the new amount owed is after taking the discount off
var newAmount = originalAmount - discountAmount;
console.log('Your new amount owed for your bill is ' + newAmount + ' .');

【参考方案1】：

你描述的那样，你的问题不会很容易实现，因为 jQueryUI Slider 默认情况下只提供“固定刻度”，我记得很多。

因此我会推荐一个不同的方向：

首先，忘记滑块的折扣。滑块应仅支持必须支付的实际金额。折扣只会让事情变得更加复杂而没有好处。在第一步中减去折扣，然后是滑块。 这样怎么样：不要提供金额滑块，而是提供客户想要支付的次数：一次付款、两次付款……、十二次付款。

所以你有一个增量为 1 的简单滑块。

为方便客户，您可以提供一个只读字段，在移动滑块时打印单次付款（例如，12 个月付款为 66 美元）。

当你真的需要一个“支付滑块”时：

当然可以自己编写“滴答”或“步骤”（在 jQuery 文档中如何调用）。您当然可以将付款范围设置为 800，将步长设置为 1。但是您必须自己实现刻度。

你是怎么做到的：

有一个“改变”事件。您可以为该事件注册一个函数。每次事件触发时，您都必须检查滑块的当前值——您所做的是检查滑块的当前位置。当滑块不在所需位置之一时，找到最近的一个并更正滑块！

你当然必须非常小心地这样做，因为事件可能很棘手。您可能遇到的一个问题是，您获得了一个事件，更正了滑块，并且由于更正本身是一种更改，您将获得另一个事件....并且您在无休止的事件递归中运行，阻塞了用户的浏览器.你当然应该避免这种情况！

您获得的效果可能或多或少是可取的。用户也可能会觉得“笨拙”，因为步骤的大小不同。如果您最终获得的行为对您的客户来说足够好，您必须尝试。

【讨论】：

感谢您抽出宝贵时间回复我的问题！我必须创建两个滑块。第二个将是您刚刚推荐的那个：付款次数，而不是每月所需的数字金额。如果我不知道如何做前者，我会尝试您的“将两者结合”与付款次数和只读字段的建议。

@KatieReed：我添加了一个草图，如何实现支付滑块。您当然可以结合两个滑块，但您的付款滑块将更难以实施。如果您想要同时使用两个滑块，则必须通过事件连接它们。