<!-- Import nouislider -->
<link href="/wp-includes/css/nouislider.min.css" rel="stylesheet">
    <script src="/wp-includes/js/nouislider.min.js"></script>

<!-- Slider -->
<div id="cost"></div>

<script type="text/javascript">

// Get slider element
var cost = document.getElementById('cost');

// Dynamic range for the slider
var slider_range = {
	'min': [ 200000 ],
	'25%': [ 300000, 100 ],
	'50%': [ 1000000,  100 ],
	'max': [ 2000000 ]
};

// Creates the noUiSlider
noUiSlider.create(cost, {
    start: 300000,
    connect: [true,false],
    tooltips: false,
    step: 100,
    range: slider_range
});

// Calls the calculateSavings function when the slider value is updated
cost.noUiSlider.on('update', calculateSavings);

// Calculates the savings that the user will receive based on the home's cost
//
// values: array of values passed in by the range slider
// handle: handle (#) that sent the event. In this case, it will always be 0
function calculateSavings(values, handle){

    //Gets the home cost from the values array
    cost = parseInt(values[handle]);

    var saved = document.getElementById('saved'); //Savings span. Will be updated when slider moves
    var calc = (cost * .03) - 995; //Calculate cash back
    var savedValue = (calc);


    //If statement to catch page initiation
    if (saved != null)
    {
        // Update Buyer Cash Back span
        saved.innerHTML = savedValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

        // Update Cost span
        costval.innerHTML = (cost).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }


}
</script>

<style>
    .noUi-handle {
        border: 8px solid #f8a321;
        height: 30px !important;
        width: 30px !important;
        top: -10px !important;
        border-radius: 40px;
        background: #ffffff;
        cursor: default;
        box-shadow: none;
    }

    .noUi-handle:hover {
        top: -10px !important;
        border-radius: 40px;
        background: #ffffff;
        cursor: default;
        box-shadow: none;
    }

    .noUi-handle:after, .noUi-handle:before {
        display: none !important;
    }

    .noUi-target {
        background: #e8e9ea;
        border: 0px;
        border-radius: 10px;
        box-shadow: none;
    }

    .noUi-horizontal {
        height: 12px;
    }

    .noUi-connect {
        background-color: #F8A321;
    }

    .noUi-connects {
        border-radius: 10px;
    }

    .calculator-text {
        color: #F8A321;
    }
</style>