Keen Pricing Tuner

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Keen Pricing Tuner</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/scrollreveal"></script>
  </head>
    <h1>Pricing Tuner</h1>
    <h2>Dialed in for:</h2>
    <input id="Slider" type="range" value="0">
    <div id="SliderUI">
      <button class="fas fa-chevron-left" id="SliderUI-Prev"></button>
      <div id="SliderUI-Gauge">
        <div id="SliderUI-Headline"></div>
        <div id="SliderUI-Needle"></div>
      </div>
      <button class="fas fa-chevron-right" id="SliderUI-Next"></button>
    </div>
    <div id="Knobs">
      <div class="Knobs-Knob" id="Knobs-1">
        <div class="Knob-Value"><span class="interpolate">0.00</span>%</div>
        <div class="Knob">
          <div class="Knob-Circle"></div>
          <div class="Knob-Dot Knob-Dot-1"><div></div></div>
          <div class="Knob-Dot Knob-Dot-2"><div></div></div>
          <div class="Knob-Dot Knob-Dot-3"><div></div></div>
          <div class="Knob-Dot Knob-Dot-4"><div></div></div>
          <div class="Knob-Dot Knob-Dot-5"><div></div></div>
          <div class="Knob-Selection"><div></div></div>
        </div>
        <div class="Knob-Title">Inserted credit cards <i class="fas fa-info-circle" title="Standard percentage rate charged on inserted or swiped CREDIT cards"></i></div>
      </div>
      <div class="Knobs-Knob" id="Knobs-2">
        <div class="Knob-Value"><span class="interpolate">0.00</span>%</div>
        <div class="Knob">
          <div class="Knob-Circle"></div>
          <div class="Knob-Dot Knob-Dot-1"><div></div></div>
          <div class="Knob-Dot Knob-Dot-2"><div></div></div>
          <div class="Knob-Dot Knob-Dot-3"><div></div></div>
          <div class="Knob-Dot Knob-Dot-4"><div></div></div>
          <div class="Knob-Dot Knob-Dot-5"><div></div></div>
          <div class="Knob-Selection"><div></div></div>
        </div>
        <div class="Knob-Title">Inserted debit cards <i class="fas fa-info-circle" title="Standard percentage rate charged on inserted or swiped DEBIT / CHECK CARDS (without a PIN entered)"></i></div>
      </div>
      <div class="Knobs-Knob" id="Knobs-3">
        <div class="Knob-Value"><span class="interpolate">0.00</span>%</div>
        <div class="Knob">
          <div class="Knob-Circle"></div>
          <div class="Knob-Dot Knob-Dot-1"><div></div></div>
          <div class="Knob-Dot Knob-Dot-2"><div></div></div>
          <div class="Knob-Dot Knob-Dot-3"><div></div></div>
          <div class="Knob-Dot Knob-Dot-4"><div></div></div>
          <div class="Knob-Dot Knob-Dot-5"><div></div></div>
          <div class="Knob-Selection"><div></div></div>
        </div>
        <div class="Knob-Title">Keyed in credit cards <i class="fas fa-info-circle" title="Standard percentage rate charged on cards keyed in manually by merchant or client as opposed to swiping or inserting."></i></div>
      </div>
      <div class="Knobs-Knob" id="Knobs-4">
        <div class="Knob-Value">$<span class="interpolate">0.00</span></div>
        <div class="Knob">
          <div class="Knob-Circle"></div>
          <div class="Knob-Dot Knob-Dot-1"><div></div></div>
          <div class="Knob-Dot Knob-Dot-2"><div></div></div>
          <div class="Knob-Selection"><div></div></div>
        </div>
        <div class="Knob-Title">Flat transaction fee <i class="fas fa-info-circle" title="The flat transaction fee charged on each sale"></i></div>
      </div>
      <div class="Knobs-Knob" id="Knobs-5">
        <div class="Knob-Value">$<span class="interpolate">0.00</span></div>
        <div class="Knob">
          <div class="Knob-Circle"></div>
          <div class="Knob-Dot Knob-Dot-1"><div></div></div>
          <div class="Knob-Dot Knob-Dot-2"><div></div></div>
          <div class="Knob-Selection"><div></div></div>
        </div>
        <div class="Knob-Title">Monthly fee <i class="fas fa-info-circle" title="The flat fee charged monthly regardless of processing volume"></i></div>
      </div>
      <div class="Knobs-Knob" id="Knobs-6">
        <div class="Knob-Value">Card Terminal</div>
        <div class="Knob">
          <div class="Knob-Circle"></div>
          <div class="Knob-Dot Knob-Dot-1"><div></div></div>
          <div class="Knob-Dot Knob-Dot-2"><div></div></div>
          <div class="Knob-Dot Knob-Dot-3"><div></div></div>
          <div class="Knob-Dot Knob-Dot-4"><div></div></div>
          <div class="Knob-Selection"><div></div></div>
        </div>
        <div class="Knob-Title">Free equipment <i class="fas fa-info-circle" title="* THIS WILL BE SPECIFIC FOR EACH PIECE OF EQUIPMENT UPDATED SOON The physical or virtual method of processing we provide you with for card payments. Inquire for plans that combine multiple of these options."></i></div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.11/d3.min.js"></script>
    <script src="scripts.js"></script>
  </body>
</html>

https://unpkg.com/scrollreveal

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.11/d3.min.js