<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script>
jQuery(function($) {
var mappings = {
"#annualPaymentsProcessingFee": {slider: "#annualPaymentsProcessingFee-slider", variable: "annualPaymentsProcessingFee"},
"#averageOrderValue": {slider: "#averageOrderValue-slider", variable: "averageOrderValue"},
"#percentageTransactionsFHEligible": {slider: "#percentageTransactionsFHEligible-slider", variable: "percentageTransactionsFHEligible"},
"#processingFeePercentage": {variable: "processingFeePercentage"},
"#processingFeePerTransaction": {variable: "processingFeePerTransaction"}
};
var annualPaymentsProcessingFee = 1000000,
averageOrderValue = 100,
percentageTransactionsFHEligible = 10,
processingFeePercentage = 2.7,
processingFeePerTransaction = 0.25,
// Unused variables are omitted for brevity but can be re-added if needed.
currentProcessingCosts = 0;
function recount() {
currentProcessingCosts = Math.round((annualPaymentsProcessingFee * (processingFeePercentage / 100)) + (numberOfOrders * processingFeePerTransaction));
formattedProcessingCosts = currentProcessingCosts.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
$("#currentProcessingCosts span").html(formattedProcessingCosts);
$("#annualPaymentsProcessingFee-output").html(annualPaymentsProcessingFee);
$("#averageOrderValue-output").html(averageOrderValue);
$("#percentageTransactionsFHEligible-output").html(percentageTransactionsFHEligible);
$("#processingFeePercentage span").html(processingFeePercentage);
$("#processingFeePerTransaction span").html(processingFeePerTransaction);
};
$(document).on("change keyup", Object.keys(mappings).join(", "), function() {
var id = "#" + $(this).attr('id');
window[mappings[id].variable] = +$(this).val();
if (mappings[id].slider) {
$(mappings[id].slider).slider("value", window[mappings[id].variable]);
}
recount();
});
var sliderConfig = {
"#annualPaymentsProcessingFee-slider": {min: 100000, max: 100000000, initialValue: annualPaymentsProcessingFee},
"#averageOrderValue-slider": {min: 10, max: 2000, initialValue: averageOrderValue},
"#percentageTransactionsFHEligible-slider": {min: 0, max: 100, initialValue: percentageTransactionsFHEligible}
};
for (var id in sliderConfig) {
$(id).slider({
range: "min",
value: sliderConfig[id].initialValue,
min: sliderConfig[id].min,
max: sliderConfig[id].max,
slide: function(event, ui) {
var correspondingInput = id.replace("-slider", "");
$(correspondingInput).val(ui.value).trigger("change");
}
});
var correspondingInput = id.replace("-slider", "");
$(correspondingInput).val($(id).slider("value"));
}
recount();
});
</script>