A Pen by Huge.

index.html

<div id="body">
    <input id="mdxRatings" type="range" class="ratings" min="1" max="5" value="1" onchange="mdxRatings.dataset.value=value;" />      
</div>

rating-module-in-single-element.markdown

rating module in single element

A Pen by Huge on CodePen.

License.

style.css

body, div, input {
  margin: 0;
  padding: 0;
  border: 0;
}

#body {
  position: relative;
  left: 100px;
  top: 100px;
}

.ratings {
  -webkit-appearance: none;
  background: url(http://cdn-0.nflximg.com/us/ffe/mobileui/ratingUI_emptystar.png) 0 0 repeat;
  width: 260px;
  height: 50px;
}

.ratings::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  background: url(http://cdn-0.nflximg.com/us/ffe/mobileui/ratingUI_fullstar.png) 0 0 no-repeat;
  width: 52px;
  height: 50px;
}

.ratings:after {
  position: absolute;
  content: '';
  left: 0;
  background: url(http://cdn-0.nflximg.com/us/ffe/mobileui/ratingUI_fullstar.png) 0 0 repeat-x;
  height: 52px;
}

.ratings[data-value="1"]:after { width: 52px; }
.ratings[data-value="2"]:after { width: 104px; }
.ratings[data-value="3"]:after { width: 156px; }
.ratings[data-value="4"]:after { width: 208px; }
.ratings[data-value="5"]:after { width: 260px; }