A Basic Star Rating Bar

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://bseth99.github.io/projects/jquery-ui/ratingbar.js"></script>
<link rel="stylesheet" href="http://bseth99.github.io/projects/jquery-ui/ratingbar.css">
<div style="margin: 10px">
<h5>Hearts with variable sizes and spacing</h5>
<br/>


<br/>
<br/>

<h5>3 Really big stars with 10 steps per star</h5>
<br/>

<br/>
<br/>

</div>

CSS

.star-fg .glyphicon-heart {
   color: red !important;
}

JavaScript

$( '[data-role="ratingbar"]' )
    .ratingbar()
    .click(function() {

     // Grab value
     alert( $( this ).attr( 'data-value' ) );

     return false;
});