jQuery Slider Bar - 嘗試根據用戶輸入設置範圍和時間間隔

Question

想法是有人會輸入他們的醫療帳單金額，並且在折扣被取消後，用戶現在有了一筆新的金額。然後用戶可以選擇他們想要在一個月內支付多少錢，直到金額全部付清爲止。

我想創建一個jQuery滑塊與可選擇的滴答打破了每月付款的選擇。例如，如果有人輸入他們的醫療費用爲1000美元，20％的折扣後會變成800美元，然後我想將800分成12個滑塊，每個值除以月數。第一個勾號在一個月內將是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 + ' .'); 

Answer 1

您的問題將不容易實現這種方式，你所描述的，因爲jQueryUI的滑塊就默認情況下只提供「固定蜱」，儘可能多的記得。

因此我會推薦不同的方向：

所有的

• 首先，忘掉折扣滑塊。滑塊應該只支持必須支付的實際金額。折扣只會讓事情變得更復雜而沒有好處。第一步減去折扣，然後滑動。
• 這個怎麼樣：不要提供金額的滑塊，而是提供客戶想要進行的付款次數：一次付款，兩次付款...，十二次付款。

所以你有一個簡單的滑塊，增量爲1。

爲了方便客戶，您可以在移動滑塊（例如，支付12個月付款時的66美元）時提供一次性付款打印的只讀字段。

當你真的有一個「支付滑塊」：

當然還有通過編程的「滴答」或「臺階」（怎麼叫jQuery的文檔中）的可能性你自己。當然，您可以將支付範圍設置爲800，並將步驟設置爲1.但是，您必須自己實施報價。

你如何做到這一點：

有一個「變」事件。您可以註冊該事件的功能。每次事件觸發時，您都必須檢查滑塊的當前值 - 並且您要做的是檢查滑塊的當前位置。當滑塊不在所需的位置時，找到最近的一個並更正滑塊！

你當然必須非常小心地做到這一點，因爲事件可能會非常棘手。你可能碰到的一個問題是，你得到一個事件，修正滑塊，並且由於修正本身就是一個變化，你會得到一個進一步的事件....並且你運行在事件的無限遞歸中，阻塞用戶的瀏覽器。你當然應該避免這種情況！

你得到的效果可能或多或少是可取的。由於這些步驟具有不同的尺寸，因此用戶也可能感覺「笨拙」。如果您最終得到的行爲足以滿足您的客戶，您必須嘗試。