<section>
  <hgroup>
    <h1>CSS Star Ratings</h1>
    <h2>Using font icons to style star ratings.</h2>
  </hgroup>
  <hr>
  <section class="simple">
    <header>
      <h3>Simple</h3>
    </header>
    <div class="open">
      <h4>Open Style</h4>
      <div class="rating-0"></div>
      <div class="rating-0_5"></div>
      <div class="rating-1"></div>
      <div class="rating-1_5"></div>
      <div class="rating-2"></div>
      <div class="rating-2_5"></div>
      <div class="rating-3"></div>
      <div class="rating-3_5"></div>
      <div class="rating-4"></div>
      <div class="rating-4_5"></div>
      <div class="rating-5"></div>
    </div>
    <div class="fill">
      <h4>Filled Style</h4>
      <div class="rating-0"></div>
      <div class="rating-0_5"></div>
      <div class="rating-1"></div>
      <div class="rating-1_5"></div>
      <div class="rating-2"></div>
      <div class="rating-2_5"></div>
      <div class="rating-3"></div>
      <div class="rating-3_5"></div>
      <div class="rating-4"></div>
      <div class="rating-4_5"></div>
      <div class="rating-5"></div>
    </div>
  </section>
  <hr>
  <section class="precise">
    <header>
      <h3>Precise</h3>
      <p>Drag to change the rating display.</p>
    </header>
    <div class="slider">
      <input type="range" name="slider-fill" min="0" max="100" value="50"/>
    </div>
    <div class="open">
      <h4>Open Style</h4>
      <!-- <input type="range" name="slider-open" min="0" max="100" value="50"/> -->
      <div class="rating">
        <div class="bg"></div>
        <div class="value"></div>
      </div>
    </div>
    <div class="fill">
      <h4>Filled Style</h4>
      <div class="rating">
        <div class="bg"></div>
        <div class="value"></div>
      </div>
    </div>
  </section>
  <hr>
</section>

* {
  box-sizing: border-box;
  color: #666;
  &:focus,
  &:active,
  &:focus:active {
    outline: none;
  }
}

body {
  padding-bottom: 20px;
}
h4 {
  margin: 0 0 15px;
}
hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 20px auto;
  width: 90%;
}
section {
  padding: 0 15px;
  text-align: center;
  > div {
    margin-bottom: 20px;
    float: left;
    width: 50%;
  }
  &.simple {
    [class*="rating-"] {
      height: 20px;
      margin: 0 auto;
      position: relative;
      text-align: center;
      width: 94px;
      &:before,
      &:after {
        color: #ccc;
        content: "\f006 \f006 \f006 \f006 \f006";
        font-family: FontAwesome;
        font-size: 20px;
        left: 0;
        position: absolute;
        top: 0;
      }
      &:after {
        color: orange;
      }
      &.rating-0 {
        &:after {
          content: "";
        }
      }
      &.rating-0_5 {
        &:after {
          content: "\f089";
        }
      }
      &.rating-1 {
        &:after {
          content: "\f005";
        }
      }
      &.rating-1_5 {
        &:after {
          content: "\f005 \f089";
        }
      }
      &.rating-2 {
        &:after {
          content: "\f005 \f005";
        }
      }
      &.rating-2_5 {
        &:after {
          content: "\f005 \f005 \f089";
        }
      }
      &.rating-3 {
        &:after {
          content: "\f005 \f005 \f005";
        }
      }
      &.rating-3_5 {
        &:after {
          content: "\f005 \f005 \f005 \f089";
        }
      }
      &.rating-4 {
        &:after {
          content: "\f005 \f005 \f005 \f005";
        }
      }
      &.rating-4_5 {
        &:after {
          content: "\f005 \f005 \f005 \f005 \f089";
        }
      }
      &.rating-5 {
        &:after {
          content: "\f005 \f005 \f005 \f005 \f005";
        }
      }
    }
    .fill {
      [class*="rating-"] {
        &:before {
          content: "\f005 \f005 \f005 \f005 \f005";
        }
      }
    }
  }
  &.precise {
    .slider {
      width: 100%;
    }
    .open,
    .fill {
      float: left;
      width: 50%;
      .rating {
        height: 20px;
        margin: 0 auto;
        position: relative;
        width: 94px;
        .bg,
        .value {
          height: 20px;
          position: absolute;
          text-align: center;
          &:before {
            color: #ccc;
            content: "\f006 \f006 \f006 \f006 \f006";
            font-family: FontAwesome;
            font-size: 20px;
          }
        }
        .value {
          overflow: hidden;
          width: 50%;
          &:before {
            color: orange;
            content: "\f005 \f005 \f005 \f005 \f005";
          }
        }
      }
    }
    .fill {
      .rating {
        .bg {
          &:before {
            content: "\f005 \f005 \f005 \f005 \f005";
          }
        }
      }      
    }
  }
}

// range styles generated by http://danielstern.ca/range.css/#/
input[type=range] {
  -webkit-appearance: none;
  width: 200px;
  margin: 20px auto;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #666666;
  border-radius: 0px;
  border: 0px solid #666666;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #ffffff, 0px 0px 0px #ffffff;
  border: 1px solid #ffffff;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #ffa500;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #737373;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #666666;
  border-radius: 0px;
  border: 0px solid #666666;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #ffffff, 0px 0px 0px #ffffff;
  border: 1px solid #ffffff;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #ffa500;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #595959;
  border: 0px solid #666666;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #666666;
  border: 0px solid #666666;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #ffffff, 0px 0px 0px #ffffff;
  border: 1px solid #ffffff;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #ffa500;
  cursor: pointer;
  height: 1px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #666666;
}
input[type=range]:focus::-ms-fill-upper {
  background: #737373;
}

$(document).ready(function() {
  $('input[type=range]').on('change', function(e) {
    var newRating = $(this).val();
    $('.rating .value').css("width", newRating + "%");
  });
});