星でレーティング評価のinput要素を作る

1. レーティング表示させる領域を<div class="range-group">とします。
2. その中に、iレーティングinput要素input[type=range]を追加します。
3. input[type=range]をcssでデザインするのは難しいので、cssでdisplay:none;にします。
4. jqueryで、星を表示させる為のa要素を、<div class="range-group">の子要素として追加します。
5. 星がクリックされたら、何番目の星がクリックされたかを判定し、input[type=range]のvalue属性に設定します。

html

<div class="range-group">
	<input type="range" min="1" max="5" value="" class="input-range" />  
</div>

css

.input-range {
  display: none;
}
.range-group {
  position: relative;
}
.range-group > a {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.range-group > a:before {
  content: "\f3ae";
  font-family: "Ionicons";
  font-size: 20px;
  color: #aaa;
}
.range-group > a.on:before {
  content: "\f2fc";
  color: #fc3;
}

jquery

$(function() {
  $('.range-group').each(function() {
    for (var i = 0; i < 5; i ++) {
      $(this).append('<a>');
    }
  }); 
  $('.range-group>a').on('click', function() {
     var index = $(this).index();
    $(this).siblings().removeClass('on');
     for (var i = 0; i < index; i++) {
        $(this).parent().find('a').eq(i).addClass('on'); 
     }
    $(this).parent().find('.input-range').attr('value', index);
  });
});