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 annualPaymentsProcessingFee = 1000000,
    		averageOrderValue = 100,
        percentageTransactionsFHEligible = 10,
        processingFeePercentage = 2.7,
        processingFeePerTransaction = 0.25,
        processingFeePercentageBinkey = 2.9,
        processingFeePerTransactionBinkey = 0.3,
        
        numberOfOrders = 10000,
        increaseInAov = 0.48,
        increaseInConversion = 0.16,
        
        currentProcessingCosts = 0,
        processingCostsWithBinkey = 0,
        processingCostsDifference = 0,
        increaseduetoAOV = 0,
        increaseInConversion = 0,
        estimatedRevenueBoost = 0,
        adminTimeSaved = 0,
        totalReturn = 0,
        
  
    
    function recount() {
        currentProcessingCosts = Math.round((annualPaymentsProcessingFee * (processingFeePercentage / 100)) + (numberOfOrders * processingFeePerTransaction));
formattedProcessingCosts = currentProcessingCosts.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
jQuery("#currentProcessingCosts span").html(formattedProcessingCosts);

    
        jQuery("#annualPaymentsProcessingFee-output").html(annualPaymentsProcessingFee);
       
       jQuery("#averageOrderValue-output").html(averageOrderValue);
       
       jQuery("#percentageTransactionsFHEligible-output").html(percentageTransactionsFHEligible);
       jQuery("#processingFeePercentage span").html(processingFeePercentage);
       jQuery("#processingFeePerTransaction span").html(processingFeePerTransaction);
              
};


recount();
    $(document).on("change keyup", "#annualPaymentsProcessingFee", function() {
        annualPaymentsProcessingFee = +$(this).val();
        $("#annualPaymentsProcessingFee-slider").slider("value", annualPaymentsProcessingFee);
        recount();
    });
    
    $(document).on("change keyup", "#averageOrderValue", function() {
        averageOrderValue = +$(this).val();
        $("#averageOrderValue-slider").slider("value", averageOrderValue);
        recount();
    });
    
    $(document).on("change keyup", "#percentageTransactionsFHEligible", function() {
        percentageTransactionsFHEligible = +$(this).val();
        $("#percentageTransactionsFHEligible-slider").slider("value", percentageTransactionsFHEligible);
        recount();
    });
    
    $(document).on("change keyup", "#processingFeePercentage", function() {
    processingFeePercentage = +$(this).val();
    recount();
});
     
    $(document).on("change keyup", "#processingFeePerTransaction", function() {
    processingFeePerTransaction = +$(this).val();
    recount();
});
    
});

$(function() {
    $("#annualPaymentsProcessingFee-slider").slider({
        range: "min",
        value: 1000000,
        min: 100000,
        max: 100000000,
        slide: function(event, ui) {
            $('#annualPaymentsProcessingFee').val(ui.value).trigger("change");
        }
    });
    $("#annualPaymentsProcessingFee").val($("#annualPaymentsProcessingFee-slider").slider("value"));
});

$(function() {
    $("#averageOrderValue-slider").slider({
        range: "min",
        value: 100,
        min: 10,
        max: 2000,
        slide: function(event, ui) {
            $('#averageOrderValue').val(ui.value).trigger("change");
        }
    });
    $("#averageOrderValue").val($("#averageOrderValue-slider").slider("value"));
});

$(function() {
    $("#percentageTransactionsFHEligible-slider").slider({
        range: "min",
        value: 10,
        min: 0,
        max: 100,
        slide: function(event, ui) {
            $('#percentageTransactionsFHEligible').val(ui.value).trigger("change");
        }
    });
   $("#percentageTransactionsFHEligible").val($("#percentageTransactionsFHEligible-slider").slider("value"));
});
</script>