Ionic > Rating Star実装する ( 星をつけるやつ )

iOSアプリの評価などに使用される Rating Star (下図のやつ） を実装しかったのですが、Ionic標準のコンポーネントにそれっぽいものがなかったので、無理やり実装してみました。参考になれば。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

使用するのは ionic-range + CSS

html

<ion-range min="1" max="5" step="1" snaps="true" class="rate-starts" margin-right [(ngModel)]="rate">
</ion-range>

css

ion-range.rate-starts {
  font-family: "Ionicons"
}

ion-range.rate-starts .range-tick {
  background: transparent;
}

ion-range.rate-starts .range-tick:before {
  content: '\f4b2';
  color: #eed755;
  font-size: 4rem;
  position: absolute;
  left: -17px;
  top: -21px;
}

ion-range.rate-starts .range-tick.range-tick-active:before {
  content: '\f4b3';
}

ion-range .range-knob-handle {
  display: none;
}


ion-range.rate-starts .range-bar {
  background: transparent;
}

CSSはassetsにファイルを追加してindex.htmlで読み込みました。 ( host: /deep/, >>> の代替が見つからないので )。
アイコンはIonicのフォントを流用しています。ここは少しアイディアです。