Untitled

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