Donation slider demo

by for3v3rforgott3n

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Donation slider demo</h1>

<input type="range" id="slider" min="10" max="100" step="10">

<span id="amount"></span>

<ul id="benefits-list" class="benefits-list">
  <li>A thank you email. Short and sweet (:</li>
  <li>A special donor badge next to your username</li>
  <li>Newest addition to our donor list!</li>
  <li>Priority support</li>
  <li>Snail mail postcard just for you!</li>
  <li>If we ever meet I'll treat you to coffee</li>
  <li>15 minute chat with me</li>
  <li>You're awesome, and you don't need anything to prove it.</li>
  <li>Okay, you can prove it.</li>
  <li>A longer thank you email?</li>
</ul>

CSS

body {
  padding: 2em;
}

.benefits-list li {
  text-decoration: line-through;
  opacity: 0.5;
  margin: 0 0 0.2em 0;
}
.benefits-list li.uncross {
  text-decoration: none;
  opacity: 1;
  color: black;
}
.benefits-list li.uncross:before {
  content: "✔";
  background: green;
  color: white;
  border-radius: 50%;
  text-align: center;
  width: 1.1em;
  display: inline-block;
  padding: 0.1em;
  margin-right: 0.2em;
}

JavaScript

var el;
var allListItems = $("#benefits-list > li");

$("input[type='range']").change(function() {

  el = $(this);
  
  val = el.val();
  
  $("#amount").html("$" + val);
  
  range = val / 10;
  
  allListItems
    .removeClass()
    .slice(0, range)
    .addClass("uncross");
  
}).change();