Eclipse Foundation Donation Slider

eclipse-foundation-donation-slider.markdown

Eclipse Foundation Donation Slider

Say what you want about the Eclipse IDE, they have a pretty website. Here is a slider styled after the Eclipse Foundation's donation request dialogue. Works in webkit, gecko, and trident.

The slider is stumping me. It should have an upwards caret that nestles into the carets below the icons, but since slider thumbs don't support pseudo-elements, I can't think of a way to do this short of using an image. Anyone have any ideas?

A Pen by Woodrow Barlow on CodePen.

License.

index.html

<form action="javascript:void(0)">
  <h2>Thank you for downloading Eclipse</h2>
  <p>If the download doesn't start in a few seconds, please <a href="#">click here</a> to start the download.</p>
  <div id="donationmessage">
    <h3>Participate in our success and together let's make Eclipse even better.</h3>
  </div>
  <div id="donationicons">
    <span title="$5">$5</span>
    <p>A <span>$5</span> donation will contribute to our ongoing success.</p>
    <span title="$10">$10</span>
    <p>A <span>$10</span> donation helps make the Eclipse community rock.</p>
    <span title="$35" class="selected">$35</span>
    <p>A <span>$35</span> donation lets you enjoy the benefits of being a Friend of Eclipse.</p>
    <span title="$50">$50</span>
    <p>A <span>$50</span> donation helps us buy 6GB of RAM for our servers!</p>
    <span title="$100">$100</span>
    <p>A <span>$100</span> donation gets you a t-shirt and other Best Friend of Eclipse benefits.</p>
    <span title="$300">$300</span>
    <p>A <span>$300</span> donation will be used to sponsor an Eclipse DemoCamp!</p>
    <span title="$500">$500</span>
    <p>A <span>$500</span> donation helps us buy more networking gear!</p>
  </div>
  <input type="range" min="0" max="6" step="1" value="2" list="donations" id="donationvalue">
  <div id="submission">
    <input type="submit" value="Donate">
    <output for="donationvalue" id="donationoutput">35</output>
  </div>
</form>

script.js

$('#donationvalue').on('input change', function() {
  var vals = [5, 10, 35, 50, 100, 300, 500];
  var val = $('#donationvalue').val();
  var rval = parseInt(val, 10) + 1;
  $('#donationoutput').text(vals[val]);
  $('#donationicons span').removeClass('selected');
  $('#donationicons span:nth-of-type(' + rval + ')').addClass('selected');
});

$('#donationicons span').click(function() {
  var val = $('#donationicons span').index(this) / 2;
  $('#donationvalue').val(val);
  $('#donationvalue').change();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

body {
  background-color: #252527;
}

form {
  text-align: center;
  background-color: #474a6a;
  width: 1000px;
  margin: 25px auto;
  padding: 25px;
  font-family: 'Open Sans', Arial, sans;
  box-shadow: 0 2px 1px rgba(0,0,0,0.3);
  h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    text-shadow: 1px 0 2px rgba(0,0,0,0.5);
    font-style: italic;
  }
  p {
    color: #fff;
    font-size: 14px;
    text-shadow: 0 0 3px rgba(0,0,0,0.25);
    margin-top: 10px;
    a {
      color: #88B1E1;
    }
    a:hover {
      text-decoration: none;
    }
  }
}

#donationmessage {
  width: 600px;
  margin: 50px auto 0 auto;
  background-color: darken(#474a6a, 5%);
  height: 70px;
  border-radius: 5px;
  box-shadow: 0 0 25px rgba(0,0,0,0.15) inset;
  h3 {
    padding-top: 10px;
    color: #88B1E1;
  }
}

#donationicons {
  position: relative;
  width: 600px;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  > span + p {
    opacity: 0;
    position: absolute;
    width: 600px;
    top: 0;
    left: 0;
    margin-top: -50px;
    font-style: italic;
    transition: opacity 0.25s 0s ease;
    span {
      color: #88B1E1;
      display: inline-block;
      &::first-letter {
        vertical-align: super;
        font-size: 75%;
      }
    }
  }
  > span.selected + p {
    opacity: 1;
    transition: opacity 0.25s 0.25s ease;
  }
  > span.selected::before {
    color: #D8CDE6;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  }
  > span {
    width: 75px;
    font-size: 0;
    display: inline-block;
    &::before {
      font-size: 28px;
      font-family: 'Ionicons';
      color: rgba(51, 53, 75, 0.8);
      /* this creates the "inset" text shadow */
      text-shadow: 1px 2px 2px #474a6a,
        0 0 0 #000,
        1px 2px 2px #474a6a,
        0 1px 1px rgba(255,255,255,0.5);
      transition: color 0.5s ease;
    }
    &::after {
      display: block;
      content: '';
      margin-left: 30px;
      margin-top: 5px;
      width: 0;
      border-bottom: 7px solid darken(#474a6a, 13%);
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
    }
    &:nth-of-type(1)::before {
      content: '\f11c';
    }
    &:nth-of-type(2)::before {
      content: '\f141';
    }
    &:nth-of-type(3)::before {
      content: '\f2fc';
    }
    &:nth-of-type(4)::before {
      content: '\f102';
    }
    &:nth-of-type(5)::before {
      content: '\f12b';
    }
    &:nth-of-type(6)::before {
      content: '\f2e2';
    }
    &:nth-of-type(7)::before {
      content: '\f348';
    }
  }
}

input { outline: none !important; }

input[type=range] {
  -webkit-appearance: none;
  background-color: darken(#474a6a, 10%);
  width: 600px;
  height: 30px;
  border-radius: 5px;
  padding: 5px;
  margin: 0 auto 25px auto;
  display: block;
  box-shadow: 0 0 2px rgba(0,0,0,0.5),
    0 2px 2px rgba(255,255,255,0.1),
    0 2px 1px rgba(0,0,0,0.15) inset;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 30px;
  background-color: darken(#474a6a, 15%);
  border: none;
  border-radius: 3px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25) inset;
}

input[type=range]::-moz-range-track {
  height: 30px;
  background-color: darken(#474a6a, 15%);
  border: none;
  border-radius: 3px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25) inset;
}

input[type="range"]::-ms-track {
  height: 30px;
  background-color: darken(#474a6a, 15%);
  border: none;
  border-radius: 3px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25) inset;
  color: transparent;
}

input[type="range"]::-ms-fill-lower {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 75px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(to right,
    transparent, transparent 4px,
    #8571a0 4px, #8571a0 5px,
    transparent 5px, transparent 7px,
    #8571a0 7px, #8571a0 8px,
    transparent 8px, transparent 10px,
    #8571a0 10px, #8571a0 11px,
    transparent 11px, transparent 64px,
    #8571a0 64px, #8571a0 65px,
    transparent 65px, transparent 67px,
    #8571a0 67px, #8571a0 68px,
    transparent 68px, transparent 70px,
    #8571a0 70px, #8571a0 71px,
    transparent 71px),
    linear-gradient(to right,
    #a088c1, lighten(#a088c1, 10%) 40%,
    lighten(#a088c1, 10%) 60%, #a088c1);
  box-shadow: 0 -2px 0 darken(#a088c1, 5%) inset,
    0 2px 0 lighten(#a088c1, 10%) inset,
    0 5px 10px rgba(0,0,0,0.5);
  &:hover, &:active {
  background: linear-gradient(to right,
    transparent, transparent 4px,
    #8571a0 4px, #8571a0 5px,
    transparent 5px, transparent 7px,
    #8571a0 7px, #8571a0 8px,
    transparent 8px, transparent 10px,
    #8571a0 10px, #8571a0 11px,
    transparent 11px, transparent 64px,
    #8571a0 64px, #8571a0 65px,
    transparent 65px, transparent 67px,
    #8571a0 67px, #8571a0 68px,
    transparent 68px, transparent 70px,
    #8571a0 70px, #8571a0 71px,
    transparent 71px),
    linear-gradient(to right,
    lighten(#a088c1, 4%), lighten(#a088c1, 12%) 35%,
    lighten(#a088c1, 12%) 65%, lighten(#a088c1, 4%));
  }
}

input[type=range]::-moz-range-thumb {
  width: 75px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(to right,
    transparent, transparent 4px,
    #8571a0 4px, #8571a0 5px,
    transparent 5px, transparent 7px,
    #8571a0 7px, #8571a0 8px,
    transparent 8px, transparent 10px,
    #8571a0 10px, #8571a0 11px,
    transparent 11px, transparent 64px,
    #8571a0 64px, #8571a0 65px,
    transparent 65px, transparent 67px,
    #8571a0 67px, #8571a0 68px,
    transparent 68px, transparent 70px,
    #8571a0 70px, #8571a0 71px,
    transparent 71px),
    linear-gradient(to right,
    #a088c1, lighten(#a088c1, 10%) 40%,
    lighten(#a088c1, 10%) 60%, #a088c1);
  box-shadow: 0 -2px 0 darken(#a088c1, 5%) inset,
    0 2px 0 lighten(#a088c1, 10%) inset,
    0 5px 10px rgba(0,0,0,0.5);
  &:hover, &:active {
  background: linear-gradient(to right,
    transparent, transparent 4px,
    #8571a0 4px, #8571a0 5px,
    transparent 5px, transparent 7px,
    #8571a0 7px, #8571a0 8px,
    transparent 8px, transparent 10px,
    #8571a0 10px, #8571a0 11px,
    transparent 11px, transparent 64px,
    #8571a0 64px, #8571a0 65px,
    transparent 65px, transparent 67px,
    #8571a0 67px, #8571a0 68px,
    transparent 68px, transparent 70px,
    #8571a0 70px, #8571a0 71px,
    transparent 71px),
    linear-gradient(to right,
    lighten(#a088c1, 4%), lighten(#a088c1, 12%) 35%,
    lighten(#a088c1, 12%) 65%, lighten(#a088c1, 4%));
  }
}

input[type=range]::-ms-thumb {
  width: 75px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(to right,
    transparent, transparent 4px,
    #8571a0 4px, #8571a0 5px,
    transparent 5px, transparent 7px,
    #8571a0 7px, #8571a0 8px,
    transparent 8px, transparent 10px,
    #8571a0 10px, #8571a0 11px,
    transparent 11px, transparent 64px,
    #8571a0 64px, #8571a0 65px,
    transparent 65px, transparent 67px,
    #8571a0 67px, #8571a0 68px,
    transparent 68px, transparent 70px,
    #8571a0 70px, #8571a0 71px,
    transparent 71px),
    linear-gradient(to right,
    #a088c1, lighten(#a088c1, 10%) 40%,
    lighten(#a088c1, 10%) 60%, #a088c1);
  box-shadow: 0 -2px 0 darken(#a088c1, 5%) inset,
    0 2px 0 lighten(#a088c1, 10%) inset,
    0 5px 10px rgba(0,0,0,0.5);
  &:hover, &:active {
  background: linear-gradient(to right,
    transparent, transparent 4px,
    #8571a0 4px, #8571a0 5px,
    transparent 5px, transparent 7px,
    #8571a0 7px, #8571a0 8px,
    transparent 8px, transparent 10px,
    #8571a0 10px, #8571a0 11px,
    transparent 11px, transparent 64px,
    #8571a0 64px, #8571a0 65px,
    transparent 65px, transparent 67px,
    #8571a0 67px, #8571a0 68px,
    transparent 68px, transparent 70px,
    #8571a0 70px, #8571a0 71px,
    transparent 71px),
    linear-gradient(to right,
    lighten(#a088c1, 4%), lighten(#a088c1, 12%) 35%,
    lighten(#a088c1, 12%) 65%, lighten(#a088c1, 4%));
  }
}

#submission {
  margin: 0 auto;
  border-radius: 5px;
  background-color: darken(#474a6a, 10%);
  width: 300px;
  height: 50px;
  input[type="submit"] {
    float: left;
    margin-top: 5px;
    margin-left: 5px;
    background: linear-gradient(to bottom, #ffd65e, #febf04);
    font-size: 24px;
    font-weight: bold;
    width: 170px;
    height: 40px;
    border-radius: 3px;
  }
  output {
    position: relative;
    display: block;
    float: right;
    margin-top: 5px;
    margin-right: 5px;
    background-color: #feffdd;
    font-size: 24px;
    font-weight: bold;
    text-align: right;
    padding-right: 25px;
    line-height: 40px;
    width: 75px;
    height: 40px;
    border-radius: 3px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25) inset;
    &::before {
      display: inline-block;
      content: '$';
      float: left;
      margin-left: 8px;
      color: #aaa;
      font-weight: normal;
    }
    &::after {
      display: block;
      content: '';
      position: absolute;
      top: 15px;
      right: 100px;
      width: 0;
      height: 0;
      border-right: 5px solid #feffdd;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400,700" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" />