Cacher is the code snippet organizer for pro developers

<!-- HTML Box -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.1/nouislider.min.css" />
<style>
#slider .noUi-connect {
	background: #ff7a00;
}
#slider .noUi-handle {
  cursor: pointer;
  border-radius: 45%;
}
#slider .noUi-handle:focus {
  outline: none;
}
.noUi-marker.noUi-marker-horizontal.noUi-marker-large {
  height: 10px;
}
.sliderText{
  padding-top: 50px;
  width: 95%;
	margin: 0 auto;
	line-height: 1.45em;
  text-align: center;
}
#annual, #savings {
    color: #ff7a00;
    font-weight: 600;
    font-size: larger;
    padding: 0 0.15em;
}
</style>

<div id="slider"></div>
<h5 class="sliderText">You spend approximately <span id="annual"></span> per year on electricity, and could save up to <span id="savings"></span> per year by signing up for Community Solar with Nexamp.</h5>

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.1/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<script>
  $(document).ready(function () {
	  // Setting price Slider
	  var slider = document.getElementById('slider');
      noUiSlider.create(slider, {
          start: 100,
          step: 1,
          range: {
              'min': [5],
              'max': [800]
          },
          connect: [true, false],
          tooltips: wNumb({decimals: 0,prefix: '$ '}),
          pips: {
            mode: 'values',
            values: [5,  200, 400, 600, 800],
            density: 6
        }
      });


var annualPrice = document.getElementById('annual');
var annualSave = document.getElementById('savings');
var formatMoney = wNumb({prefix: '$'});

// Setting price Slider value into hidden field
slider.noUiSlider.on('update', function (values, handle) {
    var sliderValue = parseInt(values[handle]);
    var annualSavings = Math.round(sliderValue * 12 / 10);  // Annual Savings formula
    $('form input[name="' + base64_encode( "Estimated Monthly Electricity Cost" ) + '"]').val(sliderValue);
    $('form input[name="' + base64_encode( "Estimated Annual Savings" ) + '"]').val(annualSavings);
    annualPrice.innerHTML = formatMoney.to(sliderValue * 12);
    annualSave.innerHTML = formatMoney.to(annualSavings);
    });
});
</script>