Bootstrap Star Rating Demo bootstrap-star-rating

Thankful to Krajee!
to get more out of us.

NOTE: The plugins on this site, strive to use a lot of CSS3 and HTML5 features in addition to JQuery. Hence, one may find either CSS3, HTML5 or a mix of both to achieve a plugin's requirements in many implementations.

A simple yet powerful JQuery star rating plugin for Bootstrap which supports advanced features like fractional star fill and RTL input support. Developed with a focus on utlizing pure CSS-3 styling to render the control. The plugin uses Bootstrap markup and styling by default, but it can be overridden with any other CSS markup.

NOTE

Version 3.0.0 has been released. Refer change log for new features and details. With version 3.0.0, the plugin now supports mouse hover functionality and displays state changes to rating stars & captions on hover.

Automatically convert a input to a bootstrap star rating control by setting its class as rating.

Support any fractional rating. For example validate a rating between 1 to 5 with a step of 0.1 for 5 stars. Drag and slide across for changing ratings for better effects on touch input devices.

Customize number of stars and change symbols . You can choose a default unicode star by setting glyphicon to false. You can also choose an alternative symbol from your icon font.

More symbols. You must use a character or HTML entity code for setting symbols (and not a CSS class or a HTML markup).

Use data attributes to control options. For example, hide/show display of clear button and caption.

Initialize star control rating on any input via javascript

Set the star rating control to be readonly or disabled

Control the size of stars by passing the size parameter. Use these codes in increasing order of size - "xs" being the smallest and "xl" being the largest: "xs", "sm", "md", "lg", "xl"
// Automatically convert a number input to a bootstrap star rating control 
// by setting its class as 'rating'
<input id="input-1" class="rating" data-min="0" data-max="5" data-step="1">

// Support any fractional rating. For example validate a rating between 1 to 5 
// with a step of 0.1 for 5 stars. Drag and slide across for changing ratings for 
// better effects on touch input devices.
<input id="input-2" class="rating" data-min="0" data-max="5" data-step="0.1">

// Customize number of stars and change symbols . You can choose a default 
// unicode star by setting glyphicon to false. You can also choose an alternative 
// symbol from your icon font (e.g. heart icon from glyphicons).
<input id="input-2a" class="rating" data-min="0" data-max="8" data-step="1" data-stars=8 
    data-glyphicon="false">
<input id="input-2b" class="rating" data-min="0" data-max="5" data-step="0.5" data-stars=5 
    data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}">

// More symbols. You must use a character or HTML entity code for setting symbols 
// (and not a CSS class or a HTML markup).
<label class="control-label">Qwerty Asterisk Symbol</label>
<input id="input-399a" class="rating" data-symbol="*">
<label class="control-label">Glyphicon Flag Symbol</label>
<input id="input-399a" class="rating" data-symbol="&#xe034" data-default-caption="{rating} flags" data-star-captions="{}">
    
// Use data attributes to control options. For example, hide/show display of 
// clear button and caption.
<input id="input-3" class="rating" data-show-clear="false" data-show-caption="true">

// Initialize star control rating on any input (e.g. text) via javascript
<input id="input-4" type="text">
/* Javascript call to initialize plugin with your desired options */
$("#input-3").rating({clearCaption: "No stars yet"}); 

// Set the star rating control to be readonly or disabled
 <input id="input-5a" class="rating" data-readonly="true">
 <input id="input-5b" class="rating" data-disabled="true">
 
// Control the size of stars by passing the size parameter. Use these codes 
// in increasing order of size - "xs" being the smallest and "xl" being the 
// largest: "xs", "sm", "md", "lg", "xl",
<input id="input-6a" class="rating" data-size="xs">
<input id="input-6b" class="rating" data-size="sm">
<input id="input-6c" class="rating" data-size="md">
<input id="input-6d" class="rating" data-size="lg">
<input id="input-6e" class="rating" data-size="xl">


Right to left (RTL) input support

Control minimum, maximum values, the step to increment, and fractional ratings based on number of stars. Note: if you have not setup the starCaptions array with captions for each star rating value, the plugin will auto generate the caption.

Configure your own captions and caption classes for each star rating.

Initialize rating with a predefined value. Automatically reset value when form is reset.

Custom Clear ButtonCaption Location
Advanced customization. Customize the style and display of the clear button. Configure your own target elements where the clear button and caption would be rendered. You can add the rating-loading class to show a spinning indicator while the plugin loads.

Using plugin events. For example set an alert on both changing or clearing the rating.

 
Using plugin methods. Update a rating value via javascript.

Using plugin methods. Automatically refresh rating based on updated options. For example, disable the rating and hide clear button after user has set the vote.
// Right to left (RTL) input
<input id="input-20" class="rating" data-rtl="true">

// Control minimum, maximum values, the step to increment, and number of stars.
// Note if you have not setup starCaptions array for each rating value, the plugin 
// will auto generate the caption.
<input id="input-21" class="rating" data-min="3" data-max="21" data-step="3">

// Configure your own captions and caption classes for each star rating.
<input id="input-22" data-min="1" data-max="5" data-step="1">
/* Initialize your rating via javascript as follows */
$("#input-22").rating({
    starCaptions: {1: "Very Poor", 2: "Poor", 3: "Ok", 4: "Good", 5: "Very Good"},
    starCaptionClasses: {1: "text-danger", 2: "text-warning", 3: "text-info", 4: "text-primary", 5: "text-success"},
});

// Initialize rating with a predefined value. Automatically reset value when form is reset.
<form>
    <input id="input-23" value="2" class="rating">
    <button class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-default">Reset</button>
</form>

// Advanced customization. Customize the style and display of the clear button.
// Configure your own target elements where the clear button and caption would 
// be rendered. You can add the `rating-loading` class to show a spinning
// indicator while the plugin loads.
<input id="input-24" class="rating-loading">
<table>
    <tr>
        <th>Custom Clear Button</th>
        <th>Caption Location</th>
    </tr>
    <tr>
        <td><span id="kv-clear"></span></td>
        <td><span id="kv-caption"></span></td>
    </tr>
</table>
/* Initialize your rating via javascript as follows */
$("#input-24").rating({
    clearButton: '<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-remove"></i> Clear</button>',
    clearElement: "#kv-clear", 
    captionElement: "#kv-caption"
});

// Using plugin events. For example set an alert on both changing or clearing the rating.
<input id="input-25" class="rating">
/* Javascript event trapping as follows */
$("#input-25").on("rating.clear", function(event) {
    alert("Your rating is reset")
});
$("#input-25").on("rating.change", function(event, value, caption) {
    alert("You rated: " + value + " = " + $(caption).text());
});

// Using plugin methods. Update a rating value via javascript.
<input id="input-26" class="rating">
<select id="rating_changer" onchange="$('#input-26').rating('update', this.value);">

// Using plugin methods. Automatically refresh rating based on updated options. For example,
// disable the rating and hide clear button after user has set the vote.
<input id="input-27" class="rating">
<script>
$("#input-27").on("rating.change", function(event, value, caption) {
    $("#input-27").rating("refresh", {disabled: true, showClear: false});
});
</script>