jQuery 滑块 -- 尝试根据用户输入设置范围和间隔
jQuery Slider Bar -- trying to setup range and intervals based on user input
这个想法是，有人会输入他们的医疗账单金额，在取消折扣后，用户现在有一个新的要支付的金额。然后，用户可以选择他们希望每月支付多少，直到全额支付。
我想创建一个 jQuery 带有可选刻度的滑块，用于分解每月付款的选择。例如，如果有人输入他们的医疗费用为 1000 美元，在 20% 的折扣后它将变为 800 美元，然后我希望将 800 分成滑块上的 12 个刻度，每个值除以月数。第一个价格变动为一个月 800 美元，而最后一个价格变动约为 800 美元。十二个月 $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 + ' .');
您描述的那样，您的问题将不容易实现，因为 jQueryUI Slider 默认只提供 "fixed ticks"，我记得如此。
因此我会推荐一个不同的方向：
- 首先，忘记滑块的折扣。 Slider 应该只支持必须支付的实际金额。折扣只会让事情变得更复杂而没有好处。第一步减去折扣，然后是滑块。
- 这个怎么样：不要为金额提供滑块，而是为客户想要进行的付款次数提供滑块：一次付款，两次付款......，十二次付款。
所以你有一个简单的滑块，增量为 1。
为了方便客户，您可以提供一个只读字段，在移动滑块时打印单次付款（例如，12 个月的付款为 66 美元）。
当你真的需要一个"payment-slider":
当然可以自己编写 "ticks" 或 "steps"（jQuery 文档中的称呼）。您当然可以将付款范围设置为 800，将步长设置为 1。但是您必须自己实施报价。
你是怎么做到的：
有一个 "change" 事件。您可以为该事件注册一个函数。每次事件触发时，您都必须检查滑块的当前值——您所做的就是检查滑块的当前位置。并且当滑块不在所需位置之一时，找到最近的一个并校正滑块！
你当然必须非常小心地这样做，因为事件可能很棘手。您可能 运行 遇到的一个问题是，您得到一个事件，更正滑块，并且由于更正本身就是一个变化，您会得到一个进一步的事件....并且您 运行 在无休止的递归中事件，阻止用户的浏览器。你当然应该避免这种情况！
您获得的效果可能或多或少令人满意。用户可能也会觉得 "clumsy"，因为步长有不同的大小。您必须尝试，如果您最终获得的行为对您的客户来说足够好。
这个想法是，有人会输入他们的医疗账单金额，在取消折扣后，用户现在有一个新的要支付的金额。然后，用户可以选择他们希望每月支付多少，直到全额支付。
我想创建一个 jQuery 带有可选刻度的滑块，用于分解每月付款的选择。例如，如果有人输入他们的医疗费用为 1000 美元，在 20% 的折扣后它将变为 800 美元，然后我希望将 800 分成滑块上的 12 个刻度，每个值除以月数。第一个价格变动为一个月 800 美元，而最后一个价格变动约为 800 美元。十二个月 $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 + ' .');
您描述的那样，您的问题将不容易实现，因为 jQueryUI Slider 默认只提供 "fixed ticks"，我记得如此。
因此我会推荐一个不同的方向：
- 首先，忘记滑块的折扣。 Slider 应该只支持必须支付的实际金额。折扣只会让事情变得更复杂而没有好处。第一步减去折扣，然后是滑块。
- 这个怎么样：不要为金额提供滑块，而是为客户想要进行的付款次数提供滑块：一次付款，两次付款......，十二次付款。
所以你有一个简单的滑块，增量为 1。
为了方便客户，您可以提供一个只读字段，在移动滑块时打印单次付款（例如，12 个月的付款为 66 美元）。
当你真的需要一个"payment-slider":
当然可以自己编写 "ticks" 或 "steps"（jQuery 文档中的称呼）。您当然可以将付款范围设置为 800，将步长设置为 1。但是您必须自己实施报价。
你是怎么做到的：
有一个 "change" 事件。您可以为该事件注册一个函数。每次事件触发时，您都必须检查滑块的当前值——您所做的就是检查滑块的当前位置。并且当滑块不在所需位置之一时，找到最近的一个并校正滑块！
你当然必须非常小心地这样做，因为事件可能很棘手。您可能 运行 遇到的一个问题是，您得到一个事件，更正滑块，并且由于更正本身就是一个变化，您会得到一个进一步的事件....并且您 运行 在无休止的递归中事件，阻止用户的浏览器。你当然应该避免这种情况！
您获得的效果可能或多或少令人满意。用户可能也会觉得 "clumsy"，因为步长有不同的大小。您必须尝试，如果您最终获得的行为对您的客户来说足够好。