JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://angularlight.org/bin/alight_0.14.last.min.js"></script>
<div al-app al-init="rating=5; max=10">
  Rating is {{rating}} <br/>
  Clickable Rating <br/>
  <rating :rating="rating" :max="max" @change="rating=$value"></rating>
  <br/>
  Readonly rating <br/>
  <rating :rating="rating" :max="max"></rating>
</div>

CSS

.rating{
  color: #a9a9a9;
  margin: 0;
  padding: 0;
}

ul.rating {
  display: inline-block;
}

.rating li {
  list-style-type: none;
  display: inline-block;
  padding: 1px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.rating .filled {
  color: #21568b;
}

JavaScript

alight.component('rating', function (scope, element, env) {
    scope.change = function (value) { return scope.$sendEvent('change', value); };
    return { template: "<ul class=\"rating\"><li al-repeat=\"_ in max\" :class.filled=\"$index<rating\" @click=\"change($index+1)\">\u2605</li></ul>" };
});