<!-- Html part goes here -->

<section class="calculator">
            <div class="calculator__wrapper">
                <h1 class="calculator__header">TITLE HERE</h1>
                <div id="employeesSlider" class="calculator__slider">
                   <!-- Managed by js -->
                <div class="calculator__lower-fill"></div></div>
                <div class="calculator__stats">
                    <div class="calculator__stat">
                        <h2 class="big-title big-title--calculator" id="stat-colleagues"></h2>
                        <p>colleagues are currently struggling with some form of mental health issue.</p>
                    </div>
                    <div class="calculator__stat">
                        <h2 class="big-title big-title--calculator" id="stat-days"></h2>
                        <p>days lost per year due to work-related stress, depression and anxiety.</p>
                    </div>
                    <div class="calculator__stat">
                        <h2 class="big-title big-title--calculator"><span>£</span><span id="stat-cost"></span></h2>
                        <p>the annual cost of ill-mental health across absenteeism, presenteeism, and staff turnover.</p>
                    </div>
                </div>
                <div class="calculator__footer">
                    <p>figures are estimated and based<br> on UK research</p>
                </div>
            </div>
        </section>

<!-- CSS part -->

<style type="text/css">
  html,
  body {
    padding: 0;
    margin: 0;
    background: #fff;
    font-family: 'Lato';
  }
  textarea {
    resize: none;
  }

  .slider-2 {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .calculator {
    width: 100%;
    clear: both;
    background: #fff;
    color: #3f3f3f;
    overflow-x: hidden;
  }

  .calculator__wrapper {
    max-width: 1100px;
    width: 96%;
    margin: 0 auto;
    padding: 40px 0;
  }

  .calculator__header {
    font-size: 36px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 150px;
    font-family: 'CircularStd', 'Lato', sans-serif;
    color: #373737;
  }

  .calculator__slider {
    position: relative;
    width: 100%;
    height: 8px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    cursor: pointer;
  }

  .calculator__slider > button {
    border: 1px solid #000;
    height: 38px;
    border-radius: 19px;
    background-color: #373737;
    background-image: url('https://assets.website-files.com/5af2f6c042cd7abaee458b4e/5b584fefe017c37a58b357eb_calculator_handle.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 0 0 2px #fff;
    cursor: pointer;
    width: 73px;
    position: relative;
    top: -15px;
    z-index: +1;
  }

  .calculator__slider > button,
  .calculator__slider > button:active,
  .calculator__slider > button:hover {
    outline: 0;
  }

  .calculator__slider output {
    color: #3f3f3f;
    position: absolute;
    top: -72px;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .calculator__slider output:after {
    content: '';
    position: absolute;
    bottom: -26px;
    left: 0;
    width: 36px;
    height: 5px;
    border-radius: 2.5px;
    background: #e5e5e5;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .calculator__lower-fill {
    display: block;
    height: 10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background: #ff4848;
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 0;
  }

  .calculator__stats {
    display: flex;
    flex-direction: column;
    margin-top: 64px;
  }

  .calculator__stat {
    width: 100%;
    max-width: 33.33%;
    padding-right: 16px;
  }

  .calculator__stat:last-of-type {
    margin-right: 0;
  }

  .calculator__stat p {
    font-size: 21px;
    font-family: 'CircularStd', 'Lato', sans-serif;
    line-height: 30px;
    color: #373737;
    margin-top: 0;
  }

  .big-title {
    font-size: 48px;
    text-transform: uppercase;
    font-family: 'CircularStd', 'Lato', sans-serif;
    margin-bottom: 7px;
    color: #ff4848;
    font-weight: 400;
    line-height: 1;
  }

  .big-title--calculator {
    color: #ff4848;
  }

  .calculator__footer p {
    color: #9f9f9f;
    font-size: 14px;
    letter-spacing: 0.42px;
  }

  .calculator__footer p {
    text-align: center;
    display: flex;
    font-family: 'CircularStd', 'Lato', sans-serif;
    line-height: 18px;
    margin-top: 30px;
    line-height: 20px;
    justify-content: center;
  }

  .calculator__footer p:before {
    content: '*';
    display: block;
    margin-right: 1px;
  }

  #wf-form-Contact-Unmind .error {
    color: #e61030;
    position: absolute;
    right: 25px;
    top: 14px;
    font-size: 14px;
  }

  @media only screen and (min-width: 768px) {
    .calculator__stats {
      flex-direction: row;
      justify-content: space-between;
    }
  }
</style>

<!-- javascript part -->

<script type="text/javascript">
  (function() {
    document.addEventListener('DOMContentLoaded', function() {
      var slider = document.getElementById('employeesSlider');

      var handle = document.createElement('BUTTON');
      slider.appendChild(handle);

      var output = document.createElement('OUTPUT');
      output.setAttribute('id', 'employeesValue');
      handle.appendChild(output);

      var lowerFill = document.createElement('DIV');
      lowerFill.setAttribute('class', 'calculator__lower-fill');
      slider.appendChild(lowerFill);

      var sliderIsMoving = false;
      var onSliderMove = function(e) {
        if (sliderIsMoving) {
          var min = 0,
            max = slider.offsetWidth - handle.offsetWidth,
            mousePos = e.pageX - slider.offsetLeft - handle.offsetWidth / 2,
            position = mousePos > max ? max : mousePos < min ? min : mousePos,
            value = (position / max) * 100;

          if (value < 1) value = 1;

          updateSlider(value, position);
        }
      };

      var updateSlider = function(value, position) {
        handle.style.marginLeft = position + 'px';
        lowerFill.style.width = value + '%';

        updateStats(value);
      };

      function roundNumber(obj) {
        return Object.entries(obj).reduce((result, [key, value]) => {
          result[key] = Math.round(value);
          return result;
        }, {});
      }

      function localeString(obj) {
        return Object.entries(obj).reduce((result, [key, value]) => {
          result[key] = value.toLocaleString('en-US', {
            minimumFractionDigits: 0
          });
          return result;
        }, {});
      }

      const currentlyStruggling = numberOfEmployees =>
        numberOfEmployees * 0.1667;
      const experiencedAProblem = numberOfEmployees =>
        numberOfEmployees * 0.414;
      const daysLost = numberOfEmployees =>
        currentlyStruggling(numberOfEmployees) * 25.8;
      const costOfIllMentalHealth = numberOfEmployees =>
        numberOfEmployees * 1300;

      function mentalHealthImpact(numberOfEmployees) {
        const healthImpact = {
          numberOfEmployees: numberOfEmployees,
          currentlyStruggling: currentlyStruggling(numberOfEmployees),
          experiencedAProblem: experiencedAProblem(numberOfEmployees),
          daysLost: daysLost(numberOfEmployees),
          costOfIllMentalHealth: costOfIllMentalHealth(numberOfEmployees)
        };

        return localeString(roundNumber(healthImpact));
      }

      function totalEmployees(value) {
        const minv = Math.log(10);
        const maxv = Math.log(100000);

        const scale = (maxv - minv) / 99;
        return Math.round(Math.exp(minv + scale * (value - 1)));
      }

      var updateStats = function(sliderPercentage) {
        const numberOfEmployees = totalEmployees(sliderPercentage);
        const stats = mentalHealthImpact(numberOfEmployees);

        document.getElementById('employeesValue').innerHTML =
          stats.numberOfEmployees;
        document.getElementById('stat-colleagues').innerHTML =
          stats.currentlyStruggling;
        document.getElementById('stat-days').innerHTML = stats.daysLost;
        document.getElementById('stat-cost').innerHTML =
          stats.costOfIllMentalHealth;
      };

      var onMoveStart = function(e) {
        sliderIsMoving = true;
        onSliderMove(e);
      };
      var onMoveEnd = function(e) {
        sliderIsMoving = false;
      };

      slider.addEventListener('mousedown', onMoveStart);
      slider.addEventListener('touchstart', onMoveStart);
      document.addEventListener('mouseup', onMoveEnd);
      document.addEventListener('touchend', onMoveEnd);
      document.addEventListener('mousemove', function(e) {
        onSliderMove(e);
      });
      document.addEventListener('touchmove', function(e) {
        e.preventDefault();

        onSliderMove(e.touches[0]);
      });

      updateSlider(
        50.5,
        slider.offsetWidth * 0.505 - handle.offsetWidth * 0.505
      );
    });
  })();
</script>